When a page loads on a website, your visitors who use keyboard or screen readers are forced to wade through all sorts of information. This includes the name of the organization, page title, site navigation, and more until they finally reach the page’s unique content. Within that same website, the website visitors encounter all unnecessary information every time they open a new page. Skip Links help people with disabilities find the content they need without this hassle.
This repetitive process can be annoying and time-consuming for anyone, but it’s surely worse for someone with a visual disability who relies on keyboard or screen readers.
Wikipedia defines a Skip Link as “an internal link at the beginning of a hypertext document that permits users to skip navigational material and quickly access the document’s main content. Skip Links are particularly useful for users who access a document with screen readers and users who rely on keyboards”.
Users can bypass all the junk and go directly to the important content they are seeking. They are absolutely crucial for web accessibility. And if designed creatively, they can match the look and feel of the website and not stand out like a sore thumb.
To see some good examples of Skip Links that blend in well with the website brand, visit some of these sites for inspiration.
The information above was entirely curated from Knowbility’s article Skip Links Design Showcase. If you want your site to be more accessible, consider adding Skip Links. Skip links help people with disabilities find the content they need while making your site accessible. Read the article for more detailed information.
According to the American Foundation for the Blind, 26.9 million adult Americans report having trouble seeing, even with glasses or contacts, or they are completely blind. Any visual impairment can make it extremely difficult for someone using a computer to interpret what they see. It’s important that your website is accessible to the visually impaired.
To ensure your website is accessible, follow the Web Content Accessibility Guidelines (WCAG) and create user interface design and visual design using the most accessible and easy-to-interpret methods possible to assist the visually impaired. Below are some best practices to follow.
Provide Sufficient Contrast between Foreground and Background: If foreground texts and background colors are too similar, they can be difficult to read. Use recommended “Contrast ratio” for images, buttons, and other elements, but not for logos or text in a photograph.
Don’t Use Color Alone to Convey Information: In addition to using colors to differentiate elements, also use symbols (e.g. asterisk, bullet point, dashes), numbers, or labels to show differentiation between elements, areas, graphs, etc. Adding a pattern to a color is another useful method.
Make Sure Interactive Elements Are Easy to Identify: For easy identification, change the appearance of links on mouse over, keyboard focus, and touchscreen activation.
Provide Clear and Consistent Navigation Options: Have clear navigation options by using consistent naming, styling, and positioning. Also use multiple methods of website navigation in addition to orientation cues, like breadcrumbs and clear headings.
Make Sure That Form Elements Include Clearly Associated Labels: All fields should have a descriptive label with minimum space between labels and fields.
Provide Easily Identifiable Feedback: Make feedback (confirmation, alerts, notification) easily identifiable. Feedback needing user action should use a prominent style.
Use Headings and Spacing to Group Related Content: Using whitespace, proximity, and style headings to group related content will help provide clarity.
Create Designs for Different Viewport Sizes: Change position and presentation of main elements (e.g. header, navigation) to optimize use of space. Adjusting text size and line width will maximize readability.
Include Image and Media Alternatives in Your Design: Use alternatives for images and media such as visible links to transcripts of audio, text with icons and buttons, and captions / descriptions for tables and graphs.
Provide Controls for Content That Starts Automatically: Use clearly visible controls to let users stop animation, auto-playing sound, carousels, and videos.
We found these tips to help you meet Web Content Accessibility Guidelines (WCAG) requirements in the article Tips for Getting Started – Designing for Web Accessibility. Read the article for more detailed information on how to make your website accessible to the visually impaired.
Harvard University is moving forward into the digital age by announcing their latest initiative to better serve students with disabilities. This initiative is aimed at making their digital content accessible and inclusive to those with disabilities.
The University’s commitment to accessibility speaks volumes about their goals for inclusivity to their current and prospective students, as well as the public. To start, they will convene a new Accessibility Steering Committee (ASC). Harvard also plans on periodically reviewing their digital content and accessibility policy to stay up to date as technology continues to evolve. A few examples of the new policy include easy navigation by screen readers, alternative text for images, and color contrast considerations. This new policy is a great example of what prioritizing audiences with disabilities looks like and how important it is to make all content accessible and available to users.
Read more about Harvard’s new digital accessibility initiative at https://news.harvard.edu/gazette/story/2019/04/harvard-adopts-university-wide-digital-accessibility/.
Is the written content on your website accessible to all visitors? Or are you unintentionally making it difficult for visitors with disabilities to access your information? Below are a few quick fixes to make your important web content more accessible to those with disabilities.
Page Title: When deciding on your webpage titles, each page should have an informative and distinguishing page title that summarizes the basic content of that page, using the most relevant information first. For example: California Zinfandel | Fine Wines World Inc.
Page Headings: Page headings are ideal for skimming content to show readers what to expect. To add clear meaning and structure, use short headings that group related paragraphs, describe sections, and outline content.
Outbound Links: When linking to other content, try to make the link text meaningful and descriptive of the link target, while avoiding ambiguous link text like ‘click here’ or ‘read more’.
Image Alt Text: Images add to the webpage content. For each image, write alternative text that delivers the most basic and meaningful information of what the image displays, such as “Charging Phone” describing the image of a phone plugged into an adapter.
Transcripts: For each type of multimedia, create relevant transcripts and captions; for example, use a transcript for audio-only content, and use captions and training videos for audio and visual content.
Instructions: Make sure that all instructions, formatting directions, and messages are simple, clear, and unambiguous without being too technical. A glossary of terms can be helpful in addition to providing useful images, illustrations, and videos to maintain clarity.
These tips to help you meet Web Content Accessibility Guidelines (WCAG) requirements were curated from the article Tips for Getting Started Writing for Web Accessibility. Read the article for more detailed information.
When it comes to designing web applications that fit into our websites, safety is a priority. One of the most widely used ways of determining the identity of a user and keeping a site safe is through a tool called CAPTCHA.
CAPTCHAs help determine whether a user is a human or a robot. They request that a site visitor click on certain images or type in a certain code of numbers and letters to demonstrate that they are in fact human. However, CAPTCHAs present a unique accessibility challenge for users with a wide range of disabilities, from vision impairments to intellectual disabilities to physical disabilities, that may keep them from being able to complete CAPTCHA forms. The inaccessibility of CAPTCHAs is something we need to keep in mind when designing a website’s safety features.
Read more about how CAPTCHAs can be inaccessible and explore alternative options that meet your users’ unique needs in this report by the World Wide Web Consortium (W3C).
The World Wide Web Consortium’s commitment to lead the Web to its full potential includes promoting a high degree of usability for people with disabilities. The Web Accessibility Initiative is an initiative of the W3C.
WAI develops its work through W3C’s consensus-based process, involving different stakeholders in Web accessibility. These include industry, disability organizations, government, accessibility research organizations, and more. Learn more at https://www/w3.org/WAI/about/.