Q. How can I format tables and images in NILE, to display correctly on the Blackboard App and Screen Readers?
To ensure tables display correctly on the Blackboard Mobile App. Staff will need to do the following:
- Use percentages in the table width.
- Resize images to ensure the overall table width does not exceed 360 pixels.
(See here for most common mobile pixel dimensions - http://gs.statcounter.com/screen-resolution-stats/mobile/united-kingdom)
Creating table width with percentages.
The following table is an example of a e-tivity template.
If created with a width wider than 360 pixels, the table will not display correctly on most mobile devices when viewed in the Blackboard App.
Below: Table width set to 600px
To change the width from pixels to percentage, edit the item then right click inside the table and select 'Table Properties':
Type 90% in the width box.
The table will then display correctly in the mobile app.
To resize images.
It is best to resize the image prior to upload, to ensure that page upload speed is optimised.
You can also change the size of the image in NILE by following these steps:
- Right click the images and select 'image'
- On the second tab 'appearance' change the dimension of the image width to no more than 250 px and click 'Update'.
Below: Original image width has been changed to 250px.
Creating accessible image and tables for screen readers
Adding image descriptions and titles.
Visually impaired readers require staff enter an 'Image Description' and 'Title' to all images in order to understand their meaning.
- To enter these right click on the image and select > 'Image' > enter these details within the 'General' Tab.
Creating Accessible tables.
People with all kinds of disabilities can easily access layout tables, as long as the tables are designed with accessibility in mind - ensuring proper linearized reading order, content scaling, etc. Content linearization refers to the order of the content when all formatting is removed. For both data and layout tables, the order in which content is presented can affect its meaning.
Screen readers essentially ignore the fact that the content is inside of a table. The screen reader just reads the content in the literal order that it appears in the code. If the literal order of the content in the code is logical, then your linearized reading order is logical.
Information courtesy of Webaim.org.
See this link for more details: https://webaim.org/techniques/tables/