The importance of accessibility
At McGill we aim to create an accessible, diverse, and inclusive campus, and this听includes our digital spaces.听
To guarantee that any and all users have a positive experience while interacting with your website, make sure to:
- Implement accessibility best practices, to ensure that all users have equal access to information
- Confirm that all users can navigate and understand the content on websites at McGill
Our 4 main takeaways
Avoid visuals with text
Image with text refers to any visual deliverable which contains text of any length, for example, a poster, an advertisement, or a banner image. An image with text eliminates the opportunity for users to modify preferences to consume that material. Across various screen types, images can be manipulated or altered, resulting in a loss of readability. Most importantly, screen reading tools cannot translate any text featured in an image; they translate alt text.
听
听
The most important part of your website is the text. Why hide your ideas within an image? Written content 鈥� which includes both text and headers 鈥� adapts to various technologies, allowing it to be accessible to any user who needs modifications. It can be resized and reformatted for different screen types and allows users the option to customize colour or contrast to best suit their needs.
It is best practice to avoid designing or using images which contain text elements within the visual. However, is it unavoidable? Say you need to display a figure on your webpage. Here is how you manage this: 鈥淐an't see this figure? Here's a听[text version].鈥� Take the time to include all written content featured in the image of the figure on the separate page.
Use alt-text with intent
Alt text (alternative text) is the written copy that replaces the contents of an image. Alt text helps screen reading tools describe the visual elements of a website to users with visual impairments. Alt text is a key factor in web accessibility, and it is important that it is done听correctly.
For detailed instructions on adding alt text to images read our article, Web accessibility made simple: WCAG 2.0 AA explained
Use headers properly
Headers are an important part of every site, as it provides structure and increases readability of your page. Always start with the largest header size, and avoid jumping header levels; i.e., from H2 to H4. H1 is reserved by the WMS for the page title, so any headers on the page should start with H2.
Header sizes are a good way to organize your content. You can :
- H1 is the book title, which tells you what the book is all about
- H2s are akin to book chapters, which describe the main topics you will cover
- Subsequent headers (H3-H6) serve as additional sub-headings within each section, just as a book chapter may be split by multiple sub-topics.
Ensure best practices when using links
Links are everywhere on the web, and chances are you have all sorts of different links on your webpages. Whether they link to other pages on your site, documents, or external resources on a different site, make sure to keep in mind these best practices:
Make sure link text is clear and descriptive
When adding a link, avoid using generic link text such as "Click here". The most helpful link text always describes the page that's being linked to. (Another reason to avoid "Click here" links is that there are no clicks on touch-screen devices.)
Use relative links when possible
When linking to pages within your site, try to instead of absolute link paths. This has a few different benefits:
- Relative link paths do not need to be updated if the domain name changes
- Short links lead to slightly faster page loading time
Avoid opening pages in new windows (unless absolutely necessary)
It is best practice to avoid new windows unless you make that decision based on observational research methods such as usability testing or surveys.
There is generally one good reason to open a page in a new window, and that is that the user will need to refer to that content in order to complete a task in another window. This applies to both webpages and documents.
- For example, someone doing their taxes may need to refer to a document describing various laws and regulations in detail in one window, with tax-preparation software open in another.听
Editoria11y: The accessibility checker
Looking to the future of accessibility, we are happy to introduce: Editoria11y (pronounced: Editorially) which is an accessibility checker that runs automatically on a webpage. This checker highlights issues with accessibility that can be updated manually. This is a tool that was recently implemented in the WMS, and will automatically check and highlight any potential accessibility concerns that may be on your site.
A List of what editoria11y highlights:
Document outline
- Skipped heading levels
- Empty headings
- Very long headings
- Suspiciously short blockquotes that may actually be headings
- All-bold paragraphs with no punctuation that may actually be headings
Text alternatives
- Images with no alt text
- Images with a filename as alt text
- Images with very long alt text
- Alt text that contains redundant text like 鈥渋mage of鈥� or 鈥減hoto of鈥�
- Images in links with alt text that appears to be describing the image instead of the link destination
- Embedded visualizations that usually require a text alternative
Meaningful links
- Links with no text
- Links titled with a filename
- Links only titled with only generic text: 鈥渃lick here,鈥� 鈥渓earn more,鈥� 鈥渄ownload,鈥� etc.
- Links that open in a new window without an external link icon
General quality assurance
- Making sure听list formatting听is used rather than asterisks, numbers and letters
- LARGE QUANTITIES OF CAPS LOCK TEXT
- Tables without headers听and tables with document headers ("Header 3") instead of table headers (<th>)
- Links to PDFs and other documents, reminding the user to test the download for accessibility or provide an alternate, accessible format
- Video embeds, reminding the user to add closed captions
- Audio embeds, reminding the user to provide a transcript
- Social media embeds, reminding the user to provide alt elements
