Hearing loss: ◦ Captions or transcripts allow individuals to access video content equally. • Color blindness: ◦ High contrast colors and avoiding sole reliance on color-coding ensure clear information. • Limited mobility: ◦ Voice commands and adaptive keyboards facilitate effective navigation.
difficulty performing tasks requiring both hands. • Visual: ◦ A blind individual faces challenges in perceiving visual information. • Auditory: ◦ A deaf person is unable to hear sounds, impacting communication and awareness. • Communicative: ◦ A mute individual cannot communicate verbally. Permanent disabilities by @sarafdez at #SERPConf
limited use of that limb temporarily. • Visual: ◦ Someone with cataracts experiences impaired vision until treated. • Auditory: ◦ An ear infection may cause temporary hearing loss. • Communicative: ◦ A person with laryngitis temporarily loses the ability to speak. Temporary disabilities by @sarafdez at #SERPConf
use of their hands temporarily. • Visual: ◦ A person walking outside in bright sunlight may have difficulty seeing their phone screen clearly. • Auditory: ◦ A waiter in a noisy bar may find it difficult to hear customers over the background noise. • Communicative: ◦ A person with a strong accent may struggle to communicate with those unfamiliar with it. Situational disabilities by @sarafdez at #SERPConf
people interact with technology and environments, recognizing that anyone can experience a disability at times. As professionals, we must: Create accessible and usable experiences for all. Align with universal design principles to ensure products and environments are accessible, regardless of age, ability or situation. https://inclusive.microsoft.design/
of disability (1 in 4 adults)... • Targeting 1% of the EU population equals 1,010,000 users with disabilities. • If 10% (100,000 users) subscribe to our product at €9.99/month, that’s around €1 million/month in revenue. Business revenue potential by @sarafdez at #SERPConf
challenging, but the numbers speak for themselves. • The focus should not just be on gaining customers, but empowering users and creating a respectful, inclusive environment that meets their needs. Convincing our stakeholders by @sarafdez at #SERPConf
The importance and benefits of web accessibility. • Legal requirements in their jurisdictions. • The ethical responsibility of making all products and services accessible. • Considering the real diversity of users that interact with a site, not just the “average” or “target” user. Educating our stakeholders by @sarafdez at #SERPConf
trading in the EU, regardless of location, including UK businesses and their suppliers. • Covers all digital products and services: ◦ Public sector websites ◦ Private sector online stores and platforms European Accessibility Act (EAA) by @sarafdez at #SERPConf https://ec.europa.eu/social/main.jsp?catId=1202&langId=en
• Computers and operating systems • Smartphones and other communication devices • TV equipment related to digital television services • ATMs and payment terminals • E-readers • Ticketing and check-in machines
• E-commerce • Banking services • Phone services • Websites and mobile services • Electronic tickets • E-books • Access to audiovisual media services (AVMS) • Calls to the European emergency number 112
for individuals with physical, mental, intellectual, or sensory impairments. • Ensure accessibility for groups such as seniors, pregnant women, or those with temporary limitations (e.g., travelers with luggage). EAA: Objectives by @sarafdez at #SERPConf
by all, regardless of abilities or circumstances. • Remove barriers that limit access, ensuring equal opportunities for interaction and engagement. • Provide alternatives for those with sensory or functional limitations (e.g., captions for audio content). EAA: Requirements by @sarafdez at #SERPConf
large buttons for easy navigation on mobile devices). • Ensure compliance with standards that align with the Web Content Accessibility Guidelines (WCAG). EAA: Requirements by @sarafdez at #SERPConf
and business size. • Some countries, like Ireland, may impose prison sentences for severe breaches. • Organizations may face lawsuits, court orders, or settlements from advocacy groups or individuals. • Legal action can force businesses to rectify accessibility issues. EAA: Penalties by @sarafdez at #SERPConf
reputation. • Inaccessible products/services alienate users, while accessible ones attract a diverse audience. • EAA compliance will be critical for public/private procurement. Non-compliant businesses risk exclusion from these opportunities. EAA: Penalties by @sarafdez at #SERPConf
EAA is on their radar and understand its implications. • Assess impact: ◦ Determine how the EAA applies to your business and operations. EAA: Key actions for businesses by @sarafdez at #SERPConf
of products and services to identify gaps. • Develop a compliance plan: ◦ Create and implement a plan to address concerns and achieve compliance before the new legislation takes effect. EAA: Key actions for businesses by @sarafdez at #SERPConf
Web Consortium). ◦ First introduced in 1999, expanded for evolving technologies and user needs. ◦ Part of the Web Accessibility Initiative (WAI). ◦ Provides detailed guidance for meeting accessibility requirements. Auditing accessibility: WCAG by @sarafdez at #SERPConf https://www.w3.org/WAI/standards-guidelines/
for some user groups. ◦ Level AA: Recommended for most businesses; meets diverse user needs. ◦ Level AAA: Highest standard; challenging to achieve for all content. Auditing accessibility: WCAG by @sarafdez at #SERPConf
• Perceptible: ◦ Information and UI components must be presented in ways users can perceive. • Operable: ◦ Users must be able to interact with and navigate the interface. • Understandable: ◦ Information and operation must be clear and easily comprehensible. • Robust: ◦ Content must be compatible with current and evolving technologies. WCAG: Key principles (POUR) by @sarafdez at #SERPConf
various devices and browsers to confirm that content is accessible and displays correctly. • User testing: ◦ Include participants with different disabilities or abilities from the early design stages to gather valuable feedback. ◦ Conduct surveys to measure the accessibility of products and services, helping to make informed decisions. User and device testing by @sarafdez at #SERPConf
Access, https://www.nvaccess.org) to simulate visual impairments and test for text, link, and graphic accessibility. ◦ Perform manual tests, such as navigating with only the keyboard or using screen readers to complete tasks blindfolded. • Finding participants: ◦ Partner with NGOs, schools, and support groups specializing in various disabilities to find diverse users for testing. User and device testing by @sarafdez at #SERPConf
Firefox and select “Inspect”. In the menu, choose “Accessibility” to open the accessibility inspector. • Check for issues: ◦ Click “Check for issues” to analyze contrast, clickable elements, and labels for accessibility improvements. • Simulate visual impairments: ◦ Use the “Simulate” dropdown to view the page as someone with protanopia (cannot see red), achromatopsia (no color), and more. Mozilla Firefox by @sarafdez at #SERPConf
select “Inspect”. In the console, choose “Lighthouse”. ◦ In Lighthouse, select “Accessibility” and run the analysis. The tool provides an accessibility score and highlights areas for improvement. Google Chrome by @sarafdez at #SERPConf
Chrome extension: WAVE Evaluation Tool. • How to use it? ◦ Enter the URL of the webpage you want to analyze. ◦ WAVE scans for accessibility issues, highlighting errors and warnings directly on the web content. ◦ The tool marks issues with icons and highlights them for easy identification, making it simple to locate and address problems. WAVE by @sarafdez at #SERPConf
audit tool that also supports accessibility analysis across multiple pages at once. • Setting up an accessibility audit: ◦ Use the “Chrome Crawler” option to enable accessibility checks. ◦ Activate the accessibility audit option during setup. • Results and reporting: ◦ After the crawl, access detailed reports and suggestions for improving accessibility. ◦ Customize audits to check for specific WCAG compliance levels during the scan.
vision impairments to test user experience on web pages. ◦ axe DevTools: Adds an extra tab in Chrome’s console to identify errors and provide suggestions for improvement. • WordPress plugin: ◦ WordPress Accessibility Checker: Integrates directly with WordPress, allowing for real-time accessibility testing during content editing. Supports bulk scans and generates reports for multiple pages simultaneously. Extensions and plugins by @sarafdez at #SERPConf
accessibility features like font size changes, contrast adjustments, or text-to-speech options. • Why they fall short ◦ These tools provide only superficial fixes, not real solutions. ◦ True accessibility requires building a website that considers all users from the start, including those using assistive technologies. ◦ Real compliance involves deep structural review and clear language, which widgets cannot achieve. Avoid accessibility widgets by @sarafdez at #SERPConf
and write clearly for all reading levels. ◦ Break information into short paragraphs and bullet points. • Structure & navigation: ◦ Use headings (H1, H2, H3) for clear structure. ◦ Create descriptive links (e.g., “Learn more about accessibility” instead of “Click here”). • Visuals & contrast: ◦ Ensure high contrast between text and background. ◦ Use alt text for images and provide transcripts for videos. • Accessible interaction: ◦ Make buttons at least 44px x 96px with sufficient padding. ◦ Allow navigation using only a keyboard. Best SXO accessibility practices by @sarafdez at #SERPConf
color to convey information. ◦ Combine colors with symbols, icons, illustrations, or text for better communication. ◦ Example: Instead of just using red to indicate a user is busy, add the text “Busy” alongside the color. • Typography & readability: ◦ Choose legible fonts (e.g., Arial, Verdana) and ensure adequate line spacing (150% of font size). ◦ Avoid complex backgrounds; keep a simple design. • Multi-device compatibility: ◦ Optimize for zoom and responsiveness on various devices. ◦ Ensure viewport compatibility (e.g., 16px for phones). Best SXO accessibility practices by @sarafdez at #SERPConf
sarafernandezseo
mixi_engineers
bob3bob3
aleyda
samtorres
taijihagino
tamaranovitovic
edwords
yourppcdoc
scudamore
pavelungr
katarinadahlin
ilovechoclates_
hatefulcrawdad
panda_program
tammyeverts
iamctodd
tanoku
davidbonilla
yeseniaperezcruz
thekraken
chriscoyier
honnibal
