In today’s digital age, the internet is akin to a vast table, and websites are the meals served upon it. Just as food nourishes the body, accessible websites nourish the mind and facilitate participation in the online world. At foods.edu.vn, we believe in serving “Food For Others” in the digital realm, which translates directly to our unwavering commitment to website accessibility. We firmly believe that the internet, like a shared meal, should be available and accessible to everyone, regardless of their abilities. Our mission is to provide a website that is not only rich in culinary content but also universally accessible, mirroring the inclusivity of a welcoming dining table.
To achieve this vision, we rigorously adhere to the World Wide Web Consortium’s (W3C) Web Content Accessibility Guidelines 2.1 (WCAG 2.1) at the AA level. These guidelines are the recipe for creating web content that can be enjoyed by people with a wide array of disabilities. By following this recipe, we ensure that our website provides a satisfying and accessible experience for everyone, including individuals with blindness, motor impairments, visual impairments, cognitive disabilities, and more. Think of WCAG 2.1 as our dietary guidelines, ensuring everyone gets the nutritional content they need online.
Our website employs various technologies, acting as skilled chefs, to make accessibility seamless and consistent. We utilize an accessibility interface, a customizable menu, allowing users with specific disabilities to tailor the website’s UI (user interface) to their personal needs, much like customizing a dish to individual preferences.
Furthermore, we have integrated an AI-based application that functions like an ever-vigilant sous-chef, constantly working in the background to optimize accessibility. This application refines the website’s HTML structure and adapts its functionality for screen-readers used by individuals with visual impairments, and for keyboard functions essential for those with motor impairments. It’s like ensuring every ingredient is perfectly prepared for optimal digestion.
Should you encounter any aspect of our digital meal that doesn’t quite meet accessibility standards, or if you have suggestions for improvement to our accessibility offerings, we warmly welcome your feedback. You can reach out to our website’s kitchen staff, the operators, via email at the address provided. Your input is invaluable in helping us refine our digital offerings and ensure everyone has a seat at our table.
Screen-Reader and Keyboard Navigation: Essential Utensils for Digital Dining
Our website is designed with ARIA attributes (Accessible Rich Internet Applications) and incorporates various behavioral adjustments, ensuring that users who rely on screen-readers can effectively navigate, comprehend, and fully utilize our website’s features. It’s akin to providing the right utensils for everyone to enjoy their meal. When a screen-reader user enters our site, they are immediately prompted to activate the Screen-Reader Profile, optimizing their browsing experience. Here’s how our website addresses key screen-reader requirements:
-
Screen-reader Optimization: Providing Clear Labels and Descriptions: We employ a background process that continuously learns the website’s components to maintain ongoing compliance, even with updates. This process is like our kitchen staff constantly checking the menu for clarity and accuracy. We equip screen-readers with meaningful data using ARIA attributes, providing accurate labels for forms, descriptive text for actionable icons (like social media, search, and cart icons), and validation guidance for form inputs. We also define element roles such as buttons, menus, and modal dialogues (popups). For instance, imagine labeling each dish clearly so everyone knows what they are choosing.
Furthermore, our background process examines all website images and, using advanced image-object-recognition technology, generates accurate and meaningful descriptions as ALT (alternate text) tags for images lacking descriptions. It also employs OCR (optical character recognition) to extract text embedded within images. This is similar to describing the visual presentation of a dish to someone who cannot see it. Users can activate screen-reader adjustments at any time by pressing Alt+1, a quick shortcut to accessibility. Screen-reader users also receive automatic announcements to turn on Screen-reader mode upon entering the website, a welcoming announcement ensuring everyone knows about the accessibility features available.
These adjustments are designed to be compatible with popular screen readers, including JAWS and NVDA, ensuring broad compatibility, much like offering universally compatible cutlery.
-
Keyboard Navigation Optimization: Making Navigation Effortless: The background process also fine-tunes the website’s HTML and integrates JavaScript code to ensure full keyboard operability. This makes navigating our site as easy as moving around a dining table. Users can navigate using Tab and Shift+Tab keys, operate dropdowns with arrow keys, close them with Esc, and activate buttons and links with the Enter key. Navigation between radio buttons and checkboxes is also arrow-key controlled, with Spacebar or Enter for selection.
Keyboard users also benefit from quick-navigation and content-skip menus, accessible anytime via Alt+1 or as the first elements when navigating with the keyboard. These are like shortcuts to different sections of a buffet. Popups are also managed to ensure keyboard focus is automatically directed upon appearance and confined within the popup, preventing focus from drifting away, ensuring a smooth and focused interaction.
Additionally, users can utilize shortcuts like “M” (menus), “H” (headings), “F” (forms), “B” (buttons), and “G” (graphics) to quickly jump to specific elements, much like using a map to find specific food stations at a large event.
Disability Profiles: Catering to Diverse Dietary Needs
- Epilepsy Safe Mode: Removing Triggers: This profile is designed for individuals with epilepsy, eliminating seizure risks from flashing or blinking animations and risky color combinations. It’s like removing potentially harmful ingredients for those with specific sensitivities.
- Visually Impaired Mode: Enhancing Visual Clarity: This mode adjusts the website for users with visual impairments such as degrading eyesight, tunnel vision, cataracts, glaucoma, and others, enhancing font sizes, contrast, and layout for better readability, similar to providing reading glasses or large-print menus.
- Cognitive Disability Mode: Simplifying Information: This mode provides assistive options for users with cognitive impairments like dyslexia, autism, or CVA, helping them focus on essential website elements more easily by simplifying layouts and reducing distractions, analogous to presenting information in clear, concise, and digestible formats.
- ADHD Friendly Mode: Minimizing Distractions: This mode aids users with ADHD and neurodevelopmental disorders to read, browse, and focus on main website elements with reduced distractions, creating a calmer and more focused browsing environment, like offering a quiet dining space away from overwhelming stimuli.
- Blindness Mode: Optimizing for Screen Readers: This mode configures the website to be fully compatible with screen-readers such as JAWS, NVDA, VoiceOver, and TalkBack, ensuring seamless navigation and content access for blind users. This is fundamental to making the digital meal accessible to everyone, regardless of sight.
- Keyboard Navigation Profile (Motor-Impaired): Keyboard as Primary Tool: This profile enables individuals with motor impairments to operate the website using keyboard keys (Tab, Shift+Tab, Enter) and shortcuts, providing an alternative to mouse navigation, essential for those who find mouse use challenging. It’s like offering adaptive utensils for easier eating.
Additional UI, Design, and Readability Adjustments: Customizing the Dining Experience
- Font Adjustments: Tailoring Text Appearance: Users can adjust font size, family (type), spacing, alignment, line height, and more, customizing text presentation to their reading preferences, just as diners can request adjustments to food texture or presentation.
- Color Adjustments: Choosing Contrast Preferences: Users can select various color contrast profiles like light, dark, inverted, and monochrome, and swap color schemes for titles, texts, and backgrounds with over 7 coloring options. This allows users to reduce visual strain and improve readability based on their visual needs, similar to adjusting lighting in a restaurant for comfort.
- Animations: Stopping Motion for Comfort: Users with epilepsy or motion sensitivity can halt all running animations with a single click. Animations controlled include videos, GIFs, and CSS flashing transitions, ensuring a safer browsing experience for those sensitive to motion, like ensuring a calm and still environment for those with motion sickness.
- Content Highlighting: Emphasizing Key Elements: Users can choose to emphasize important elements like links and titles, and highlight focused or hovered elements, making key interactive elements visually distinct and easier to identify, like highlighting key ingredients on a menu.
- Audio Muting: Controlling Sound Environment: Users with hearing devices or sensitivity to sound can instantly mute the entire website, avoiding potential discomfort or interference from automatic audio playback, like offering a quiet zone in a noisy eatery.
- Cognitive Disorders: Providing Context and Definitions: We integrate a search engine linked to Wikipedia and Wiktionary, enabling users with cognitive disorders to easily decipher meanings of phrases, initials, slang, and unfamiliar terms, providing immediate access to definitions and context, like having a glossary or explanation of unfamiliar dish names.
- Additional Functions: Extra Tools for Accessibility: We provide options to change cursor color and size, use a printing mode, enable a virtual keyboard, and many other functions, offering a suite of tools to further personalize and enhance accessibility, like offering a variety of condiments and tools to personalize the dining experience.
Browser and Assistive Technology Compatibility: Serving Everyone’s Preferred Platforms
We are committed to supporting a broad spectrum of browsers and assistive technologies, ensuring users can choose their preferred tools with minimal limitations. We have worked diligently to support major systems covering over 95% of the user market share, including Google Chrome, Mozilla Firefox, Apple Safari, Opera, and Microsoft Edge, as well as JAWS and NVDA screen readers for both Windows and MAC users. This extensive compatibility is like ensuring our digital meals can be enjoyed on any device or platform.
Notes, Comments, and Feedback: Continuous Improvement of Our Digital Kitchen
Despite our dedicated efforts to make our website adaptable to everyone’s needs, there may still be pages or sections that are not fully accessible, are in the process of becoming accessible, or currently lack an adequate technological solution. However, we are committed to continuous improvement, constantly adding, updating, and refining our accessibility options and features, and embracing new technologies to reach optimal accessibility levels, keeping pace with technological advancements. We see this as an ongoing process of refining our recipes and kitchen practices to better serve our diverse audience. For any assistance or to provide feedback, please do not hesitate to reach out.
