Portable Document Files (PDFs) – we rely on them to convey a lot of information at ĐÓ°ÉÔ­´´. They are very useful – for the appropriate purposes, such as ensuring that information is presented in the same way wherever it appears.

However, PDFs can be filled with pitfalls, especially in terms of accessibility. Some people think PDFs should only be used very sparingly, including . He has been saying this for 25 years. In this 2020 article with collaborator Anna Kaley, .

You can also , which summarizes everything we say below (plus more), but which comes directly from someone with lived experience of this subject.

What makes a document accessible?

Clearly written language

As with writing, for the web the key is clear and succinct language. Make sure your important message comes first. If all the information is of equal relevance then make sure the writing is well organized (see below).

Also ensure the language for the document is set – this ensures what you write is pronounced by a screen reader in a consistent and comprehensible manner.

Correctly formed headings

If there is one way to make a PDF more accessible, it is the use of headings. In exactly the same way web pages, PDFs must have a hierarchical structure, using headings. As with the web, screen readers can interpret a document that is structured properly very easily. And this makes the document more accessible for everyone.

Consistency in document layout

Laying out content in sporadic ways means it is harder to scan both visually and technically. Never uses spaces or empty lines (that is, the Return key) to create extra whitespace in the document. In addition, tables must never be used for content layout. The only use for table is to present data/information in an organized and accessible way.

Appropriately tagged images

Just as with web pages, images in PDFs need to have alternative text, if it is required. It should describe the image in a way that is useful. For example, a photograph of a person mentioned in the page should not just say a photo of Jane Doe. It is important to make it clear what the person looks like, for example, Jane Doe is a young black woman with close cut dark hair. Do not assign alt text to purely decorative images.

And don’t use images to convey textual information – exactly the same as with web pages.

The use of the right tools

Whichever software you use, make sure that it has accessibility features. Most of us use Microsoft Word to create PDFs. You can on the Microsoft website. One key part of creating PDFs from Word documents is to ensure you export to PDF and not print to PDF.

In conclusion

It is straightforward to create accessible documents when you have the right tools and knowledge. Remember also to ask, does this content need to be in a PDF in the first place?

The post Yes it’s portable, but is it accessible? PDFs and a11y appeared first on Web Services.

Understanding link language

Hyperlinks are the simple but essential snippet of technology that make the internet possible. (If they didn’t exist, imagine typing addresses every time you wanted to go to a new page.)

Hypertext that describes the link properly is critical for all users. Take this example:

• You can learn more about this subject. Professor A. Einstein.

What is going to happen if I click the link? Will it take me to a biographical page about Prof Einstein? To their lab website? Open an email to write to them? Then consider these links:

• .

• Contact Professor Einstein.

• .

These three are much better links because they describe what will happen if you click the link. Helpful for everyone.

Links and Accessibility

But: even more helpful for people who use screen readers to help them browse the web. This is because a major method for browsing with such tools to set the screen reader to hop from link to link on the page. This means when they tab to this section of the site:

You can learn more about this subject. Professor A. Einstein.

all they will hear is “Link: Professor A. Einstein.” They are left with even less information than people reading visually (who can at least make a guess based on the words You can learn more about this subject).

Again with the examples:

.

Contact Professor Einstein.

.

The text makes explicit what will happen if the user choses to click that link.

The idea of a call to action in the link is useful, but sometimes link text becomes too long if we try to always include a verb. For example, why use text like:

.

While this is more succinct but still signals what the user will encounter:

.

The text we use in links is one of the biggest areas of improvement required to optimise accessibility on the web – at ĐÓ°ÉÔ­´´ and everywhere – and as we have seen, like all improvements which aid accessibility, these features improve the experience for everyone.  

The post Don’t be the weakest link appeared first on Web Services.

While there is a huge commitment to the principles of accessibility among the ĐÓ°ÉÔ­´´ – and no more so among the community of people who maintain its web content – there is always more for us to learn. Today we are going to learn about one word:

A11y

If you’re thinking that’s not a word – that’s a typo, then pay attention while we talk about Numeronyms.

What’s in a number

Numeronyms are words or expressions where some of the letters are replaced with numbers to create an abbreviated form of the word. If you think you have never seen a numeronym before, then let’s think back twenty-two years to ’s 2002 hit single Sk8tr Boi. The word sk8tr is a numeronym for skater. Now you know. (And yes, that was 22 years ago, and yes, you’re getting old: Avril turns 40 this year.)

Sk8tr is an example of a homonym numeronym – a word with a number or numbers which sounds like the numbers. (l8tr is another example, as is B4.) Other numeronyms are numerical contractions – this is where a number replaces a section of a word with the number of letters it is replacing. An example is g11n for globalization.

A11y – a numeronym with meaning

Which brings us to a11y – the numeronym for the word accessibility. The 11 in a11y represents the eleven letters the number replaces. But of course, the word also spells ally, and allyship is a crucial component in creating more accessible space. Without a set of allies, accessibility initiatives often fail. Therefore, a11y is a particularly appropriate way to represent accessibility.

Spelling is an accessibility issue

This brings me to the selfish part of our drive to use a11y. Spelling is an accessibility issue. This can be for different reasons. For people with dyslexia or other reading disabilities, of course, spelling is a major barrier in written communications that they either consume or create. But spelling some words can be an issue for anyone with a visual disability. You don’t have to be particularly long-sighted to find the seven letters in a row with vertical strokes in the word accessibility hard to read. I know this from experience and as I have to write the word accessibility multiple dozen times a week I am leading the drive for us to employ a11y when and where we can.

For this selfish reason I am advocating that we all now accept the common spelling of accessibility as a11y.

Say it out loud

When we see the word though, what do we say? The has guidance on how to pronounce the word a11y. They say we should continue to pronounce the word accessibility in full rather than as ay-eleven-why. This is because the numeronym is only meant as a shorthand for what it means (with the neat association of being an ally as a bonus). We need to remember that the prime focus of what we do is the accessibility component.

Useful places to employ a11y include in an article like this where you otherwise have to type the word accessibility multiple times, or in a social media post where you want to limit your characters – using a11y saves you nine letters!

You can learn more about the use of this numeronym on the . They are keen to use the word appropriately and without causing anyone any stress. As they say, “as long as we do our best to make people aware of what numeronyms stand for, and use them appropriately, then their usage and accepted understanding will only grow.”

Thank you for being a11y ally!

The post Being an A11y: the meaning of Accessibility appeared first on Web Services.

Too good to be true…

You may have seen them. Often, they are represented by a blue circle with the white icon of a person: an accessibility overlay. Such a great idea, it seems. With the click of a mouse, a user can select different font sizes, change background/foreground colours, hide images on the page and add more legible fonts. You can on the website of the New School, a university in New York City. Like most people, when I first saw this tool I was wowed by the functionality it offered everybody, not just those with disabilities. In fact, Web Services has explored obtaining such a tool which allow us to have an accessibility overlay because they seem so amazing!

…because it’s not true!

The crucial word, however, is seem.

To many people it appears that such an overlay could only be a good thing. It offers so much! It makes things seem so easy to adjust on your website! It comes in a choice of colours!

But once we looked under the hood, things weren’t quite what they seemed. The first clue came when attending an accessibility conference online in 2021. The first presenter mentioned in their opening remarks the perils and pitfalls of accessibility overlays. As did the next presenter. And the presenters after that… for both days of the conference. It was not the fact that world experts on accessibility were telling me it’s a bad idea; it was the fact that many of them spoke from personal experience not as web dev experts (although they were) but as web users who have disabilities. We sat up and listened.

Shining examples/hideous warnings

Before we go further, it is useful to talk more about what kinds of functionality an accessibility overlay offers. It is also the point in the article at which I become tired of typing accessibility overlay – it is now referred to only as AO.

The easiest way to understand what an AO can do is to use one. Here we have some examples of sites that use this kind of tool:

– The AO is activated by means of a blue (teal?) coloured circle with a white human icon midway up right-hand side of the screen. [update April 2026: overlay has been removed]

– The AO is in the bottom left and is a black circle (which often disappears with the darkness of a photo) with a white human silhouette on it. (While you’re in there, my birthday is in January and I .)

(The British Airways online store) – click on the dark blue circle in the bottom right with the white human icon inside it.

– some aspects are on when you arrive at the site (pro tip: don’t have the volume turned all the way up when you click this link). Otherwise blue circle/white human in bottom right.

Tools that these AO offer include text-to-speech, highlighting links on a page, legible fonts, and font size changing.

We recommend visiting some of these sites in order to find out for yourselves what they can do.

Overpromising and underdelivering

If you have done that, or even just read some of the features, you must be wondering where the problems are. What these AO offer are so promising! In fact, the question is not where the problems are, it is how many do we have time to go into. They are legion.

We can begin with general principles. Do you who spends a lot of time and energy setting up computers, other hardware, and software to enable easier browsing of websites for people with disabilities? People with disabilities! They have screen readers, physically assistive technology, browser extensions, and other apps installed and configured in the best way to suit their needs. AO is a one-size catch-all that doesn’t necessarily meet the needs of an individual.

As an example, let’s look at the text-to-speech screen reading options in some AO tool sets. On the Mount Sinai Medical Center website, You can switch on the AO screen reading tool and set it to read at slow, normal, or fast speed. Setting it at fast, I clocked it reading at 264 words per minute. Impressive, huh? Well, no. Many users of screen readers train themselves to read at 800+ words per minute. (If you never do anything else to educate yourself on accessibility I urge you to of this video from Jamie on using a screen reader). In other words, a user deciding to employ the AO’s built-in screen reader might be reading at 25% of their usual pace.

That’s not to say the tool isn’t useful for some people – for instance, people who are not working with a severe visual disability but just need a web page read to them while they are out walking the dog or getting dressed in the morning. But while the aim of accessibility features is to help as many people as possible, the baseline criteria for success is that some of those people it helps should be people with disabilities.

Offering you – for a price – what you already have

Some features of AOs are mystifying, not because they don’t work properly but because they are redundant. All AOs offer text resizing options. But resizing of text is a basic function of all web browsers and websites in the 21^st century. It offers very little more in terms of functionality than what CTRL +/- offers a user.

Other features limit functionality that might already be in place. For example, the ability to set the pointer on your computer to a large size. Arguably that is useful. But in Web Services we use MacBooks – you can set the size in the Mac OS and you can change the settings to make the pointer become very large if you rattle your mouse a few times. In most AOs the pointer actually becomes smaller when you shake the mouse once it has been fixed as large.

There are several AOs which exhibit broken features also. On the New School Architecture Department’s website you can switch images off – a useful feature which most browsers offer you the ability to deploy – but when you switch them back on, not all the images reappear.

Consistently inconsistent

Sticking with the New School we can see another problem with the use of AOs by very large organizations. It is specifically the Architecture Department I’m referring to when I point you at the New School for examples – the university’s other departmental and administrative sites don’t employ AOs. This means someone could be merrily employing the tools it offers as they browse the Architecture website, but when they click on a link about admissions, dining, or student loans they are taken to a different area of the New School’s website – one which doesn’t offer those features.

Even if the whole of the New School did offer the AO experience, the next site the person goes to might well not offer it and so there will be a sudden break in the level of support someone enjoys. It is a better effort on the whole that everyone try to increase actual accessibility.

Papering over the cracks

This highlights another major criticism of AOs: they simply gloss over accessibility issues instead of fixing them. Partly this is a sales pitch: some (not all) companies spin AOs as something which will offer protection against lawsuits from those with disabilities who might otherwise get litigious because of failures of accessibility on a site.

This might seem a weird angle to work but if you spend much time speaking and listening to folks advising on accessible content in the USA and it quickly becomes apparent that a major motivation for making sites accessible is the fear of a lawsuit.

However, if a website owner thinks that simply bolting an AO onto their site will stop the threat of litigation, they are mistaken. At present there are 400 individua and class action law suits against entities whose website employs an AO – all claiming that the accessibility on the sites is sub-legal.

The problem? In the same way taking painkillers might dull the ache from a broken leg, the AO might superficially help with some aspects of accessibility. But also like the painkillers, the AO doesn’t address the fundamental issue of a website. If your leg is broken the pain won’t really stop coming back until the fracture is fixed. AO allow some organizations and businesses to ignore the essential issues that affect their users experience of their site.

Confessions of an inaccessible website owner

Linked to that notion that a site with an AO is trying to gloss over its issues with a superficial fix, is the question of what you are saying about your website when you employ an AO.

Look at it this way. Some AOs actually have a button to press which is labelled Legible font. The idea here is that it switches the font to a font which assists those with dyslexia in accessing text. The font is visually weighted and slanted in a slightly different way from other fonts. Let’s leave aside the fact that most research says there is no universal benefit to employing these fonts, and look at this instead: What are you saying about the fonts you usually employ on your websites? Answer: if you say fonts are legible only after deploying the AO then your standard fonts are not legible.

(Neuroodivergent advocacy group pose the question around these font and provide a succinct answer: “Can ‘dyslexia-friendly’ fonts help? If you’ve heard of dyslexia fonts, you may wonder if they help people with dyslexia read better.

The short answer is no. Researchers have studied these typefaces. So far, they haven’t found evidence that the fonts help kids or adults .”)

Another common tool is the Highlight links functionality. Why do you need that? Your web team should have done the research and work to make your links highlighted already. Why? Because everybody needs to be able to see them! If they aren’t highlighted then in fact people with screen readers have an advantage because while those not using such a tool might miss them, at least those having the site read to them can leap straight to the next link, have it read to them, and make a decision before the other users have even found the first link.

We can also emply the Remove images tool. The New School Architecture website illustrates again why the fundamental issue is with the accessibility of the content and bells and whistles won’t change that. There are three images on the page which convey info via text embedded in them.

These are a no-no to start with, but especially so as they don’t have alt text to convey the info via screen readers. But now if someone switches off the images on the page – for instance, someone whose neurodivergence creates a real need to declutter the page – that information disappears for them. While it would never been accessible for someone with a severe visual disability.

More machine than human

Speaking of images, one difficulty with any application that deals with accessibility is that the fundamental difference between who encounters the issue (a human) ad who assesses it (a robot). AOs can act in the ways of humans to some degree, but at the end of the day they cannot tell which images require alt text for instance and which don’t. As AOs can create alt text for images on the fly using artificial intelligence. They often get this very wrong.

Location, location, location

One last thing to consider is where the AO icon resides on a website. Let’s think about the examples of websites we listed above. Notice that each site differs in the location of the icon, how the tool is represented, or what you have to do to initiate the AO tool. On most websites it is standard that if the user hits the Tab key when they arrive on a web page, they will be taken to the main content (that is to say, the navigation menu is skipped). This makes sense – after all they have presumably arrived at the page because they wanted to come here – the menu gives them perhaps a hundred ways to leave the page. But if they know what they want from the page, being sent to the AO button first is frustrating. They can tab off that but there is no guarantee they know that the tab order is correct and they are being sent to the beginning of the content.

That would be a ‘no’ then?

Seems like a resounding no from the accessibility community. Of course, there are those who say AOs are worthwhile, effective, and useful. But often those are businesses whose main product is AO and are misleading in their marketing. Those who know more about accessibility and aren’t trying to sell an AO are vociferously against their use. You can guess the stance of some experts without reading their articles about AO, but just from the headline of their story. For example, one journalist, in the spirit of compromise and neutrality, titled their article Accessibility overlays are evil and they need to die. (I didn’t link to this as it uses an inappropriate image in the piece; you can google it if you wish.)

We know sometimes you are asked by supervisors about the use of AOs and we hope what we have laid out here enables you to dissuade them from pushing the point. We do of course have a set of training modules about accessibility, and you can read more about it on our website.

The post Overly overlaid with over-promising: Why we don’t use an accessibility overlay appeared first on Web Services.

Web accessibility and search engine optimization (SEO) are two crucial factors that contribute to the success of a website.

Web accessibility: aims to ensure usability and equal access to online content for everyone.

Search engine optimization (SEO): aims to increase a website’s visibility and rank in search engine results.

While these two factors may seem initially seem unrelated, they actually go hand in hand! Web accessibility can have a significant impact your user experience, which can affect your website’s search engine rankings. Let’s take a look at three web accessibility practices that can actually improve your website SEO!

Headings and Subheadings

Structuring your website content with headings and subheadings (e.g., H2, H3, H4) not only aids screen reader users in understanding the content but also helps search engine crawlers interpret and index your web pages. Proper headings provide clear signals to search engines about the relevance and importance of different sections, improving your website’s SEO

Optimizing Link Text

Link text is the visible text used for linking to another page or website. Link text should accurately describe the linked content, providing users with a clear understanding of what they can expect upon clicking the link. From an SEO perspective, link text provides valuable clues to search engines about the content and context of the linked page. This helps search engines comprehend the structure of pages, identify important keywords within the link text, and improve the overall webpage’s visibility.

Which of the following hyperlink options is better?

1. To learn more, click here
2. To learn more, check out our article on how web accessibility and SEO are related

If you selected the second option, then you’re correct! It provides more descriptive information and is more beneficial for both SEO and accessibility purposes.

Descriptive Alternative Text

Alternative text, or alt text, is an essential component of web accessibility that describes the content and purpose of images. For visually impaired users who rely on screen readers, alt text provides a textual representation of images, enabling them to understand and engage with your website’s visual elements. Interestingly, alt text also plays a significant role in SEO. Search engines cannot directly interpret images, but they rely on alt text to understand the image’s context and relevance to the content. Optimizing alt text with relevant keywords can improve your website’s visibility in image search results and contribute to overall SEO efforts.

Conclusion

By implementing web accessibility practices, you not only create a more inclusive and user-friendly website but also enhance your website’s SEO. Improving content structure, content understanding, and overall user experience are all positive outcomes of web accessibility that positively impact SEO.

The post Web Accessibility and Search Engine Optimization appeared first on Web Services.

Animation is a captivating and powerful medium that has become a significant part of our education landscape. However, to truly harness the potential of animation, it is crucial to ensure that it is accessible to individuals of all abilities.

Animation, with its visual and auditory nature, can present unique challenges. As we continue to produce more animated videos, we’ve come to realize the importance of developing a stronger understanding of accessibility in animation. Our goal is to ensure that everyone can fully enjoy and engage with animated content. In this article, we’ll be sharing some of our learnings, so that YOU can also create inclusive animations!

Visual Accessibility

Here are some key considerations for ensuring visual accessibility in animation:

• Include Audio Descriptions: Audio descriptions are separate audio tracks containing speech that describes the action, characters, and scenes of a video. Adding audio descriptions enables individuals who are blind or have visual impairments to comprehend the visual aspects of the animation.
• Ensure Sufficient Colour Contrast: Use colour combinations that offer enough contrast to make the visual elements easily distinguishable. This helps individuals with colour blindness or low vision to perceive the animation clearly. You can use r to determine if your animations have sufficient colour contrast.
• Design Clear and Readable Text: If there’s text in your animated video, make sure to use legible fonts, appropriate font sizes, and ample spacing between lines and paragraphs. This makes the text content accessible to individuals with visual impairments or reading difficulties.

Auditory Accessibility

Audio plays a vital role in conveying emotions, dialogue, and sound effects in animations. However, individuals with hearing impairments or those who are deaf may struggle to fully comprehend the auditory elements. To address this, it is essential to include accurate closed captions or subtitles that effectively represent the dialogue and sound effects. These captions should be synchronized with the animation and presented in a clear and easily readable format, ensuring accessibility for all viewers. To learn more about the differencen between captions and subtitles and why we use them, check out our blogpost titled Captivating Captions: Why We Use Captions on Video. Additionally, we have a great tutorial on Generating Transcripts and Closed Captioning from YouTube Videos.

Cognitive Accessibility

Here are some key considerations for ensuring cognitive accessibility in animation:

• Employ clear and concise narratives: Minimize cognitive load by clearly communicating using plain language, and using logical progression to guide viewers through the animation. As well, it’s helpful to repeat important information or key points throughout the video to reinforce understanding.
• Avoid excessive visual clutter: Ensure that the visual elements in the animation are clear and easy to comprehend. Use simple and recognizable visuals, avoiding clutter or overwhelming details that could confuse or distract viewers with cognitive disabilities.
• Avoid Rapid Visual Changes or Flashing Effects: Rapid changes in visuals or excessive flashing can trigger epilepsy and migraines in susceptible individuals. Your animation should be free of any any element that flashes more than three times per second.
• Optimize Timing and Pace: Overly fast-paced animation can be challenging for individuals with cognitive disabilities or processing difficulties. Provide sufficient time for viewers to read and process on-screen text or important visual information.
• Consistency and Predictability: Maintain consistency in the visual and auditory cues throughout the animation. Establish predictable patterns and sequences to help individuals with cognitive impairments anticipate and understand the content better.

Media Player and Assistive Technologies

• Captions and audio description support: The video player should have the capability to display captions and support audio description tracks. This ensures that individuals with hearing impairments or those who benefit from additional audio narration can access the content effectively.
• Keyboard accessibility and labeled controls: The video player’s controls, including captions, audio description, and setup menu, should be accessible via keyboard commands. It should be possible to toggle captions and audio description on/off without relying on a mouse. Additionally, all buttons and controls should be properly labeled, allowing keyboard-only users to navigate the player easily.
• Adjustable subtitle display parameters: The video player should offer options to modify the display parameters of subtitles. Users should be able to adjust the size of the text and customize the colors of the text and background. This flexibility accommodates individual preferences and enhances readability for users with visual impairments or specific needs.
• User control over video playback: Avoid autoplay functionality for videos, as it can interfere with assistive technologies like screen readers. Users should have full control over starting and stopping video playback, enabling them to synchronize the content with assistive technologies or their personal preferences.

Resources

The post Animating Accessibility: The Art of Inclusion appeared first on Web Services.

From May 28 to June 3, it’s National AccessAbility Week, which is dedicated to celebrating disability inclusion and accessibility in Canada! In today’s digital age, the importance of web accessibility cannot be overstated. As we strive for inclusivity, it becomes imperative to understand the experiences of those who rely on assistive technology to navigate the online world. We had the opportunity to interview, Rebecca Jackson, a ĐÓ°ÉÔ­´´ University alumnus with a background in Psychology and Disability Studies. Currently serving as a Contract Technology Trainer at the Paul Menton Centre, Rebecca has been using screen readers (Jaws, NVDA, and VoiceOver) for over 16 years. Screen readers enable individuals with visual impairments to navigate and interact with digital content. Through our discussion, Rebecca shares her invaluable insights on screen reader usage and the importance of creating web content that is accessible to all.

Insights from an Experienced Screen Reader User

Can you describe the process you use to navigate web pages with your screen reader (with regards to text, images, tables and links)?

When using Jaws or NVDA, I use the arrow keys to read by line of text. I can also use control with left and right arrows to navigate by word, or left and right arrow keys to navigate by letter if I want to double-check the spelling of the word. I also have a braille display which I sometimes use to read text. When navigating images, I rely on alternative text to tell me what is in the image. Some screen readers have a feature where they can describe an image. I press t to navigate to a table and using NVDA or Jaws, I use control alt and arrow keys to navigate. Tables are easier to navigate if column and row headers are labeled, as they are spoken by screen readers. Descriptions or table summaries are helpful if there is a lot of information in the table.

How do you typically search for information on a website using a screen reader?

I search for information in a few different ways. I use headings to easily skim a webpage for information. If there is a place to search for information on a website I will use that. Titles of links are also very important, as they might provide clues to search for information. The easiest websites to navigate are ones with good page structure. Headings and landmarks can help with this.

Have you encountered any accessibility issues with websites in the past? If so, can you describe the issue?

There is some content that is more of a challenge to access with a screen reader. Complex charts and tables can present issues if they do not include a summary of the content. I have noticed this can be an issue in academic articles from time to time. Lack of alt text for images can be a particularly difficult issue and is encountered on things like social media and shopping websites. Captchas can sometimes create issues if there is no audio challenge for them.

Have you found that certain types of content are more difficult to access with a screen reader than others? If so, can you give an example?

I have encountered accessibility issues with websites. Many websites do not put alt text on their images, meaning that I don’t know what the image depicts. Another common issue is unlabeled elements such as links, buttons, or form controls. When there is no label for the element the screen reader will say “button” or “link” and so you don’t know what you’re clicking on. Another issue is the use of slideshows on websites that cannot be paused. This causes the screen reader to continue reading the content of the slideshow while navigating. In more recent years there has been a trend towards using accessibility overlays on websites. You might see a “screen reader” mode or something like that. I often find these can create problems, as they sometimes lead to accessibility issues. I recently encountered a website with this mode and was unable to press a button even though it was correctly read. 

Can you describe any strategies you use to ensure that you’re getting all the information you need from a web page using your screen reader?

I use a few strategies to ensure that I get the most information that I can from a web page. If the page structure is not very good e.g. no headings, I will rely on the title of links instead. If there aren’t very many links, I use the find feature to look for a particular word. If images have no alt text, I will use OCR or an app that connects me with visual assistance.

Are there any features or functionality on websites that you’ve found to be particularly helpful or useful when using a screen reader?

Skip to content links are helpful on websites where there is a lot going on. They make it more efficient to navigate right to the content that is most important.

How do you feel about the current state of web accessibility for screen reader users?

Websites have become more accessible overall, however there is still a lot of work to be done.

Do you have any suggestions for web editors on how they can make their sites more accessible for screen reader users?

Web editors can use headings and landmarks to make websites more efficient to navigate. Describing the purpose of a link and having clear links for names is also helpful for finding information. If using a captcha, make sure there is an audio alternative. Make sure that all images have alt text that is concise. Make sure to label form elements like checkboxes and buttons. If ever you are unsure if a website is accessible, consult with various users including screen reader users.

Demonstration of Screen Reader Usage

As part of our news story, Rebecca kindly provided a brief demonstration of screen reader functionality, allowing us to witness firsthand how screen readers empower navigation through web pages. Rebecca showcased her experience in accessing various elements such as images, tables, and links, highlighting both positive and challenging examples. This demonstration provides a glimpse into the experience that screen reader users encounter while navigating digital content.

Advocating for Accessibility at ĐÓ°ÉÔ­´´

Through our interview with Rebecca Jackson, we gained invaluable insights into the world of screen readers and the challenges faced by users. Their expertise shines a light on the significance of inclusivity, and we hope this encourages website editors at ĐÓ°ÉÔ­´´ University to prioritize accessibility when creating digital content. Implementing accessible practices not only supports individuals with visual impairments but also benefits everyone!

National AccessAbility Week is a perfect time to put the spotlight on accessibility and inclusion in Canada. Join the conversation by following and sharing posts from  and from . Remember to use the hashtags #NAAW2023 and #FromPossibilitiesToPractice when referencing the week in social media posts!

Resources for Creating Accessible Web Content

Web Services’ Accessibility Training Workshop: This training is an introduction to web accessibility and its importance. It gives a brief overview of the relation between disability and accessibility, as well as approaches to accessibility strategy, regulations, and guidelines. Topics include making text, images, tables, and videos accessible. As well, the workshop includes an Accessibility Checklist that you can use to review your website for accessibility.

: The WCAG provides a comprehensive set of guidelines and best practices for creating accessible web content. It covers various aspects, including perceivable, operable, understandable, and robust web design principles.

Screen Reader Documentation and Guides: Each screen reader has its own documentation and user guides. Some popular screen readers include , , and . Familiarize yourself with the documentation for the screen reader(s) you want to optimize for, as it will provide insights into the specific functionalities and features available.

Request an Accessibility Scan: Web Services offers an accessibility scanning service. We do this in two ways: we run the website through our scanning application, and we visit a number of pages on your site to physically check items that the software scan cannot. The software we use to scan sites is called PopeTech. You can  here. It uses  from Accessibility in Mind to examine multiple pages at a time.

Don’t forget to stay up-to-date with our accessibility blogposts!

The post Web Accessibility and Screen Readers: A Conversation with Rebecca Jackson appeared first on Web Services.

Accessibility! Accessibility! Accessibility! Here at Web Services, you may notice we chat often on this topic, though that is only because it plays such a key role in the web world. Across the ĐÓ°ÉÔ­´´ domain, we want to ensure everyone has the same user experience. Below are five common accessibility issues found on websites. Have a look at this list and see if your site is free of these issues.

1. Missing Alt Text on Images

Alt (alternative) text describes the appearance of an image on a page. It is important to note that all images should have alt text, even social media posts. Including alt text is crucial for web accessibility, as some individuals use screen readers and rely on alt text to understand visual content they may not be able to see.

2. Weak Colour Contrast

Using poor colour contrast between the background and text colour can make it difficult to read website content, especially for individuals with low vision. As a general guide for contrast, black on white is recommended. In some cases, coloured text is needed, such as the use of hyperlinks to display proper site content. If this is the case on your site, we recommend using a colour contrast checker such as or you can google “colour contrast checkers.” This tool will assess whether your website’s colours are within the right ratio.

Note: Web Services takes care of this at the template level.

3. Missing Form Label

A form label is an HTML element used in forms to describe what the various fields and controls in the form are for. Form labels ensure that users of assistive technology such as screen readers will know what information they should enter in the field. All fields in a form should be properly labelled.

Note: Web Services takes care of this at the template level.

4. Non-descriptive Link Text

Link text should describe the link text’s destination. This helps all users get to link destinations and information faster, especially those using screen readers. Instead of using generic link text such as “click here” or “read more”, which lacks description, title the link with details on where the user will be directed to such as “read more about accessibility” or “browse more blog posts.” This helps those using screen readers to identify the link’s destination.

5. Improper Use of Headings

Proper heading hierarchy is key for organizing the structure of your site. Headings should follow the order of <h1> (heading 1) the most important, to <h6> (heading 6), the least important. An incorrect heading order error means your heading structure has skipped over a level. All pages should follow the proper heading hierarchy, this ensures that users using screen readers will understand the flow of the page.

If you have reviewed this list, and you are still unsure if your website displays accessibility errors, you can request an accessibility scan. You can also explore our Web Accessibility Checklist, as well as more accessibility resources on our site.

The post 5 Common Web Accessibility Issues appeared first on Web Services.

Does anyone remember ? It was produced by , and was available between and . It was the first diet soda Coke produced. Its name was chosen by the company’s recently acquired computer (although it preferred spelling the name with a double ‘b’ – this second ‘b’ was removed by its human overlords). In 1992, Coke released a clear version, producing the mildly sensation of drinking something that looked like soda or but which tasted like ordinary cola.

We aren’t really here to learn about that kind of Tab™. There is, of course, another type of tab that we come into contact with on a daily basis – the ones that sit across the top of our browser.  When we create a link in any web content, it is easy to add the instruction to open this in a new tab. That is what I did with the opening paragraph – if you hadn’t clicked on the links as you read it, please go back and click on each link to see what the effect is.

Now you have at least eight tabs open (including this one). In fact, the latest advice is to not open new links in a new tab.

Why keep all the content in the same tab?

Word on the street used to be that if you were opening content with a hyperlink to another site, you should open this in a new tab. Opening a PDF? New tab. Want your content to be spread out like all the nations of the earth before you, so that your site visitors can survey your mighty empire and give praise to you like a deity? New tab new tab new tab!!

But the thinking has changed, and user experience (UX) designers now advocate for opening all links (with a couple of exceptions below) in the same tab. Why is this?

One of the main principles of good UX is that the user maintains as much control as possible. A user has the ability with any link to open it in a new tab or not (they can hold down the CMD button on a Mac/the CTRL button on a Windows PC as you click on a link) – but only if the link by default is programmed to open in the same tab. If a link is created to open in a new tab there isn’t the equivalent keyboard (or assistive device) action to force it to open in the same tab: in other words, control has been taken away from the user.

And user control becomes critical if you are an individual with a disability who is surfing the web. A user employing a screen reader has a very different experience than someone who can see all their tabs open in one space (a screen reader sees them sequentially). If a user clicks on eight links and they all open in new tabs then it means to work their way through those pages they have to have the page name read to them.

This relies on pages being named correctly by the content creators whose pages you are linking to, and this is not always the case.

As a responsible content creator, you decide therefore to only open pages in a new tab if the destination page has an accurate and unique page title. Otherwise, they stay in the same tab. This creates a problem: now some of your pages open in a new tab and some don’t. Your users have lost not only control of how a page loads, but also any idea of consistency on your website. They won’t know if a page will open in the same tab or another.

When can we open links in new tabs?

There are a few times that opening up in a new tab is fully justified and improves the UX.

The first of these is if you have a link in a form – one that provides further context, instructions, or conditions. If you need to present users with a long waiver to which they have to agree it does not make any sense to have this load in the tab where the form is also housed – the user will lose any information they have entered into the form already. The waiver should be made to automatically load in a new tab when the link to it is clicked.

If a user is logged into a secured area and clicking on a link that leads to a page outside that area, clicking it and loading the content in the same tab might log them out of the area. In that scenario, it is better to have the link load externally. (You can test first of all whether a user will be logged out if they click on a link and it loads in the same tab before you go the opposite route.)

Another instance for this action would be when you present a video or audio on the page. Some content creators, assuming the user has started playing an embedded video, choose to make any links on that page pop open a new tab. The reasoning behind this is that if the user clicks on a link while the video is playing, they may lose their place in the video and be diverted from it. While this justification makes sense, it also creates that inconsistency that can make users uncertain of what will happen every time they click on a link. Ultimately, it is a judgment call for the page creator to decide whether or not to open links in a new tab in this situation.

Let’s bring it back to Tab™ Cola

The really unique thing about Tab Cola was that version of the drink that was transparent. Remember that as a guiding principle when creating links: you want things to be as clear as possible. Users should know where all links open and the best way to do that is to work with the default behaviour in all browsers: the link opens in the same tab. That consistency makes the behaviour of every link very clear. Plus it’s refreshing and has zero calories!

—

Some further reading:

The post Keeping Tabs on Tabs appeared first on Web Services.