{"id":37749,"date":"2025-06-10T07:00:00","date_gmt":"2025-06-10T14:00:00","guid":{"rendered":"https:\/\/cloudinary.com\/blog\/?p=37749"},"modified":"2025-06-20T09:55:23","modified_gmt":"2025-06-20T16:55:23","slug":"eaa-ready-accessible-media-gallery-cloudinary-mdn-standards","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/eaa-ready-accessible-media-gallery-cloudinary-mdn-standards","title":{"rendered":"Building an EAA-Ready, Accessible Media Gallery With Cloudinary and MDN Standards"},"content":{"rendered":"<div class=\"wp-block-cloudinary-markdown \"><p>As the <a href=\"https:\/\/commission.europa.eu\/strategy-and-policy\/policies\/justice-and-fundamental-rights\/disability\/union-equality-strategy-rights-persons-disabilities-2021-2030\/european-accessibility-act_en\">European Accessibility Act (EAA)<\/a> enforcement has went into effect, developers across the EU and beyond are being called to make websites and digital services more accessible. While compliance is a legal obligation, it is also a meaningful step toward building inclusive, user-centered experiences.<\/p>\n<p>This tutorial walks through how to build an accessible media gallery using <a href=\"https:\/\/cloudinary.com\/\">Cloudinary<\/a> for media delivery and enhancement, combined with practical techniques from the <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/Accessibility\">MDN Web Accessibility guidelines<\/a>. You\u2019ll learn how to apply semantic HTML, support assistive technologies, and enhance visual content with captions, contrast, and responsive design.<\/p>\n<h2>The EAA and Its Relevance to Developers<\/h2>\n<p>The <a href=\"https:\/\/commission.europa.eu\/strategy-and-policy\/policies\/justice-and-fundamental-rights\/disability\/union-equality-strategy-rights-persons-disabilities-2021-2030\/european-accessibility-act_en\">European Accessibility Act (EAA)<\/a> aims to ensure that key digital products and services in the EU are accessible to people with disabilities. It covers areas like public websites, online retail platforms, mobile apps, audio-visual media, and online banking.<\/p>\n<p>The EAA is built on four core accessibility principles that every developer should understand:<\/p>\n<ul>\n<li>\n<strong>Perceivability<\/strong>. Content must be presented in ways that are accessible, such as through screen reader compatibility, alt text for non-text content, and high-contrast visuals.<\/li>\n<li>\n<strong>Operability<\/strong>. Interfaces should be usable with a keyboard and accessible input methods, without requiring a mouse.<\/li>\n<li>\n<strong>Understandability<\/strong>. Users must be able to follow navigation and actions clearly, with consistent layout and helpful feedback.<\/li>\n<li>\n<strong>Robustness<\/strong>. Websites should work reliably with a wide range of technologies, including assistive tools like screen readers.<\/li>\n<\/ul>\n<p>These principles are consistent with the <a href=\"https:\/\/www.w3.org\/WAI\/standards-guidelines\/wcag\/\">Web Content Accessibility Guidelines (WCAG)<\/a>, and the <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/Accessibility\">MDN accessibility docs<\/a> offer concrete guidance for putting them into practice.<\/p>\n<h2>Live Demo: Accessible Media Gallery in Action<\/h2>\n<p>Before we dive into the code, here\u2019s the working example of the accessible media gallery we\u2019re going to build.<\/p>\n<p>It includes:<\/p>\n<ul>\n<li>Alt text for images.<\/li>\n<li>Keyboard operability.<\/li>\n<li>Cloudinary-enhanced media (subtitles, contrast, and color-blind features).<\/li>\n<li>Responsive light and dark mode support.<\/li>\n<\/ul>\n<p>All of this aligns with the core principles of the <strong>European Accessibility Act<\/strong>, and follows guidance from both <strong>MDN Web Docs<\/strong> and <strong>WCAG 2.1<\/strong>.<\/p>\n<blockquote>\n<p><strong>Note<\/strong>: Best viewed in a modern browser like Chrome or Edge with JavaScript enabled.<\/p>\n<\/blockquote>\n<iframe height=\"500\" width=\"750\"  scrolling=\"no\" title=\"Accessible Media Gallery (Cloudinary + MDN + EAA)\" src=\"https:\/\/codepen.io\/musebe\/embed\/NPPOxjP?default-tab=\" frameborder=\"no\" loading=\"lazy\" allowtransparency=\"true\" allowfullscreen=\"true\">\n  See the Pen <a href=\"https:\/\/codepen.io\/musebe\/pen\/NPPOxjP\">\n  Accessible Media Gallery (Cloudinary + MDN + EAA)<\/a> by eugene musebe (<a href=\"https:\/\/codepen.io\/musebe\">@musebe<\/a>)\n  on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.\n<\/iframe>\n<h3>Project Structure and Setup<\/h3>\n<p>To keep our code modular and maintainable, we\u2019ll organize the project into three separate files:<\/p>\n<pre class=\"js-syntax-highlighted\"><span><code class=\"hljs shcb-wrap-lines\">\/accessible-gallery\n\n\u251c\u2500\u2500 index.html    \n\u251c\u2500\u2500 styles.css    \n\u2514\u2500\u2500 script.js     \n<\/code><\/span><\/pre>\n<p>We\u2019ll walk through each part, starting with the HTML layout.<\/p>\n<h2>Structure the Foundation With Semantic HTML<\/h2>\n<p>To build anything accessible, the foundation must be meaningful to both humans and machines. HTML is not just about outputting elements to a screen, it\u2019s about building a structure that browsers, assistive technologies, and users can understand and navigate reliably.<\/p>\n<p>We\u2019ll begin with <code>index.html<\/code>.<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml shcb-wrap-lines\"><span class=\"hljs-meta\">&lt;!DOCTYPE <span class=\"hljs-meta-keyword\">html<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">html<\/span> <span class=\"hljs-attr\">lang<\/span>=<span class=\"hljs-string\">\"en\"<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">head<\/span>&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">meta<\/span> <span class=\"hljs-attr\">charset<\/span>=<span class=\"hljs-string\">\"UTF-8\"<\/span> \/&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">meta<\/span> <span class=\"hljs-attr\">name<\/span>=<span class=\"hljs-string\">\"viewport\"<\/span> <span class=\"hljs-attr\">content<\/span>=<span class=\"hljs-string\">\"width=device-width, initial-scale=1.0\"<\/span> \/&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">title<\/span>&gt;<\/span>Accessible Media Gallery<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">title<\/span>&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">link<\/span> <span class=\"hljs-attr\">rel<\/span>=<span class=\"hljs-string\">\"stylesheet\"<\/span> <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\">\"styles.css\"<\/span> \/&gt;<\/span>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">head<\/span>&gt;<\/span>\n\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>This head section sets the tone for everything that follows.<\/p>\n<ul>\n<li>The <code>lang=&quot;en&quot;<\/code> attribute may look small, but its impact is big. It\u2019s the first hint to a screen reader like NVDA or VoiceOver about how to interpret text phonetically. Without it, assistive tools may default to incorrect pronunciation or miss key localization cues. As recommended by the <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/Accessibility\">MDN Accessibility docs<\/a>, this should be present on every page.<\/li>\n<li>The <code>meta viewport<\/code> ensures content scales on all screen sizes, a necessity not just for UX, but also for accessibility, particularly for users with motor disabilities who rely on zoom features on mobile.<\/li>\n<li>The stylesheet link (<code>styles.css<\/code>) may seem purely visual, but the way we use color, contrast, and spacing in that file directly influences the <em>perceivability<\/em> of our content, one of the four foundational principles of the <a href=\"https:\/\/commission.europa.eu\/strategy-and-policy\/policies\/justice-and-fundamental-rights\/disability\/union-equality-strategy-rights-persons-disabilities-2021-2030\/european-accessibility-act_en\">EAA<\/a>.<\/li>\n<\/ul>\n<h3>Introducing the Page\u2019s Purpose<\/h3>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-2\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml shcb-wrap-lines\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">body<\/span>&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">header<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h1<\/span>&gt;<\/span>Accessible Media Gallery<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h1<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">p<\/span>&gt;<\/span>\n      This demo follows the\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">a<\/span> <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\">\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/Accessibility\"<\/span> <span class=\"hljs-attr\">target<\/span>=<span class=\"hljs-string\">\"_blank\"<\/span>&gt;<\/span>MDN Accessibility Guidelines<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">a<\/span>&gt;<\/span>,\n      utilizes <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">a<\/span> <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\">\"https:\/\/cloudinary.com\/blog\/simple_steps_to_make_your_site_accessible_with_cloudinary\"<\/span> <span class=\"hljs-attr\">target<\/span>=<span class=\"hljs-string\">\"_blank\"<\/span>&gt;<\/span>Cloudinary's accessible media tools<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">a<\/span>&gt;<\/span>,\n      and aligns with the <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">a<\/span> <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\">\"https:\/\/commission.europa.eu\/...\/european-accessibility-act_en\"<\/span> <span class=\"hljs-attr\">target<\/span>=<span class=\"hljs-string\">\"_blank\"<\/span>&gt;<\/span>European Accessibility Act<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">a<\/span>&gt;<\/span>.\n    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">p<\/span>&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">header<\/span>&gt;<\/span>\n\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-2\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>Think of this header as the page\u2019s thesis. It gives users, especially screen reader users who may skim by landmarks a clear and early summary of what this content is and why it exists. <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/Accessibility\/ARIA\/Reference\/Roles\/structural_roles\">MDN recommends<\/a> using <code>&lt;header&gt;<\/code> elements to introduce regions, especially when followed by informative content.<\/p>\n<p>This content also links directly to the governing guidelines we\u2019re aligning with: MDN for technical practice, Cloudinary for accessible media delivery, and the EAA for legal and inclusive design frameworks.<\/p>\n<h3>Create an Accessible Region for Media<\/h3>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-3\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml shcb-wrap-lines\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">main<\/span>&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">section<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"gallery\"<\/span> <span class=\"hljs-attr\">aria-label<\/span>=<span class=\"hljs-string\">\"Accessible image and video gallery\"<\/span> <span class=\"hljs-attr\">role<\/span>=<span class=\"hljs-string\">\"list\"<\/span>&gt;<\/span> \n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-3\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>Now we\u2019re moving into the heart of the page, a region where the actual interactive content lives. The use of <code>&lt;main&gt;<\/code> is important. It defines the <strong>primary content<\/strong> of the document, letting assistive tech bypass repetitive elements and jump straight to what matters.<\/p>\n<p>Inside <code>&lt;main&gt;<\/code>, we use a <code>&lt;section&gt;<\/code> for our media gallery. But more than just HTML, we add:<\/p>\n<ul>\n<li>\n<code>aria-label=&quot;Accessible image and video gallery&quot;<\/code>\n<\/li>\n<\/ul>\n<p>This provides a human-friendly description that screen readers will announce \u2014 even if the content inside is abstract or media-heavy.<\/p>\n<ul>\n<li>\n<code>role=&quot;list&quot;<\/code>\n<\/li>\n<\/ul>\n<p>This gives structure. Each media item inside will act like a list item. Screen readers will announce how many items are inside and the role each item plays, an improvement over default <code>&lt;div&gt;<\/code> wrappers.<\/p>\n<h2>Enhance Perceivability: Cloudinary\u2019s Color-Blind Assist<\/h2>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-4\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml shcb-wrap-lines\">\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">figure<\/span> <span class=\"hljs-attr\">tabindex<\/span>=<span class=\"hljs-string\">\"0\"<\/span> <span class=\"hljs-attr\">role<\/span>=<span class=\"hljs-string\">\"group\"<\/span> <span class=\"hljs-attr\">aria-label<\/span>=<span class=\"hljs-string\">\"Balloons image enhanced for color-blind users\"<\/span>&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">img<\/span>\n    <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/e_assist_colorblind,w_600,q_auto,f_auto\/balloons.jpg\"<\/span>\n    <span class=\"hljs-attr\">alt<\/span>=<span class=\"hljs-string\">\"Colorful balloons floating in the sky with enhanced visibility for color blindness\"<\/span>\n    <span class=\"hljs-attr\">loading<\/span>=<span class=\"hljs-string\">\"lazy\"<\/span> \/&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">figcaption<\/span>&gt;<\/span>\n    Color-blind assisted view<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">br<\/span> \/&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">a<\/span> <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\">\"https:\/\/cloudinary.com\/documentation\/effects_and_artistic_enhancements#assist_people_with_color_blind_conditions\"<\/span> <span class=\"hljs-attr\">target<\/span>=<span class=\"hljs-string\">\"_blank\"<\/span>&gt;<\/span>\n      Cloudinary Docs: e_assist_colorblind\n    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">a<\/span>&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">figcaption<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">figure<\/span>&gt;<\/span>\n\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-4\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>Let\u2019s unpack this from top to bottom, <strong>structure, semantics, and transformation<\/strong> and how each piece maps to EAA requirements and MDN best practices.<\/p>\n<h3>Why Use <code>&lt;figure&gt;<\/code> and <code>&lt;figcaption&gt;<\/code>?<\/h3>\n<p>According to <a href=\"https:\/\/developer.mozilla.org\/en-US\/search?q=Document%20structure%20roles\">MDN\u2019s HTML structure roles<\/a>, the <code>&lt;figure&gt;<\/code> element is ideal for self-contained media. When paired with <code>&lt;figcaption&gt;<\/code>, it forms a complete accessible media object that:<\/p>\n<ul>\n<li>Gives context to the image.<\/li>\n<li>Allows screen readers to interpret it as a single unit.<\/li>\n<li>Makes content more understandable for all users.<\/li>\n<\/ul>\n<h3>Make the Media Keyboard Accessible<\/h3>\n<p>The addition of <code>tabindex=&quot;0&quot;<\/code> turns the figure into an interactive focusable region. This is <strong>crucial<\/strong> under the EAA\u2019s <strong>operability<\/strong> principle: Users must be able to explore media without relying on a mouse. On many websites, non-interactive <code>&lt;img&gt;<\/code> tags are invisible to keyboard users. By making the entire figure focusable, we let users pause and explore the context just like they would on an image carousel.<\/p>\n<h3><code>role=&quot;group&quot;<\/code> and <code>aria-label<\/code><\/h3>\n<p>This is where <strong>semantic richness<\/strong> meets accessibility. While <code>&lt;figure&gt;<\/code> and <code>&lt;figcaption&gt;<\/code> already provide good HTML semantics, <code>role=&quot;group&quot;<\/code> explicitly signals to assistive technology that all children of this element belong to a shared, meaningful cluster.<\/p>\n<p>Meanwhile, <code>aria-label=&quot;Balloons image enhanced for color-blind users&quot;<\/code> gives that group a <strong>clear name<\/strong> when it\u2019s read aloud by screen readers. Without this, screen reader users might only hear \u201cimage\u201d or \u201cfigure\u201d, lacking meaningful context.<\/p>\n<h3>The Cloudinary Transformation: <code>e_assist_colorblind<\/code><\/h3>\n<p>Now let\u2019s talk about the real star of this block: the image URL.<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-5\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\">https:<span class=\"hljs-comment\">\/\/res.cloudinary.com\/demo\/image\/upload\/e_assist_colorblind,w_600,q_auto,f_auto\/balloons.jpg<\/span>\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-5\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>Here\u2019s what\u2019s happening:<\/p>\n<ul>\n<li>\n<strong><code>e_assist_colorblind<\/code><\/strong>. This is a Cloudinary effect that adds <strong>pattern overlays or hue shifts<\/strong> to make images more readable for users with <strong>color vision deficiencies<\/strong> one of the most common forms of visual disability.<\/li>\n<\/ul>\n<p>This transformation directly supports the <strong>EAA\u2019s perceivability principle<\/strong>, which mandates that color <strong>not<\/strong> be the only means of conveying information.<\/p>\n<ul>\n<li>\n<p><strong><code>w_600<\/code><\/strong>. Resizes the image to a manageable width improving performance and avoiding zooming issues that can disrupt layout.<\/p>\n<\/li>\n<li>\n<p><strong><code>q_auto,f_auto<\/code><\/strong>. Ensures optimal compression and format (like WebP), which helps <strong>robustness<\/strong> ensuring the image renders consistently across devices and assistive tech.<\/p>\n<\/li>\n<\/ul>\n<p><a href=\"https:\/\/cloudinary.com\/documentation\/effects_and_artistic_enhancements#assist_people_with_color_blind_conditions\">Cloudinary Docs: Assist Color Blind<\/a><\/p>\n<h3>Why This Block?<\/h3>\n<p>This is more than a media card. It\u2019s a <strong>compliance-ready, user-friendly<\/strong> building block that\u2019s:<\/p>\n<ul>\n<li>Keyboard navigable.<\/li>\n<li>Properly labeled.<\/li>\n<li>Color accessible.<\/li>\n<li>Semantically grouped.<\/li>\n<li>Responsively delivered.<\/li>\n<\/ul>\n<h2>Designing With Empathy: Simulating Color Blindness Using Cloudinary<\/h2>\n<p>Unlike the previous block, which enhanced the viewing experience for users, this section helps developers <strong>test and validate<\/strong> their visual design choices. By applying Cloudinary\u2019s <code>e_simulate_colorblind<\/code> transformation, we generate a version of the image that reflects how it might appear to someone with color vision deficiency such as red-green color blindness.<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-6\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml shcb-wrap-lines\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">figure<\/span> <span class=\"hljs-attr\">tabindex<\/span>=<span class=\"hljs-string\">\"0\"<\/span> <span class=\"hljs-attr\">role<\/span>=<span class=\"hljs-string\">\"group\"<\/span> <span class=\"hljs-attr\">aria-label<\/span>=<span class=\"hljs-string\">\"Simulated view of landscape for color-blind users\"<\/span>&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">img<\/span>\n    <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/e_simulate_colorblind,w_600,q_auto,f_auto\/sample.jpg\"<\/span>\n    <span class=\"hljs-attr\">alt<\/span>=<span class=\"hljs-string\">\"Simulation of mountain landscape for color-blind testing\"<\/span>\n    <span class=\"hljs-attr\">loading<\/span>=<span class=\"hljs-string\">\"lazy\"<\/span> \/&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">figcaption<\/span>&gt;<\/span>\n    Developer-facing color-blind simulation<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">br<\/span> \/&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">a<\/span> <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\">\"https:\/\/cloudinary.com\/documentation\/transformation_reference#e_simulate_colorblind\"<\/span> <span class=\"hljs-attr\">target<\/span>=<span class=\"hljs-string\">\"_blank\"<\/span>&gt;<\/span>\n      Cloudinary Docs: e_simulate_colorblind\n    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">a<\/span>&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">figcaption<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">figure<\/span>&gt;<\/span>\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-6\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>This transformation is essential when validating whether your content communicates <strong>without relying solely on color<\/strong>. It visually exposes potential accessibility issues, such as indistinguishable buttons or charts, before they reach real users.<\/p>\n<p>Cloudinary handles this simulation entirely through the image URL no external tooling, plugins, or local preprocessing needed. It becomes part of your design process, not an afterthought, making accessibility testing easy to integrate into everyday workflows.<\/p>\n<p>The European Accessibility Act requires developers to ensure content remains understandable to people with visual impairments, including color blindness.<\/p>\n<p>This simulation supports that mandate and mirrors <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/Accessibility\/Guides\/Understanding_WCAG\/Perceivable\/Color_contrast\">MDN\u2019s guidance on color contrast<\/a>, which emphasizes not using color alone to communicate meaning.<\/p>\n<blockquote>\n<p>Cloudinary documentation: <a href=\"https:\/\/cloudinary.com\/documentation\/transformation_reference#e_simulate_colorblind\">e_simulate_colorblind<\/a><\/p>\n<\/blockquote>\n<h2>Enhance Visual Clarity With Cloudinary\u2019s Brightness Adjustment<\/h2>\n<p>Some users don\u2019t need high magnification or screen readers, they simply need <strong>better contrast<\/strong>. This is especially true for people with low vision or glare sensitivity. An image that looks beautiful to one user may be unreadable to another, especially if it serves as a background or contains overlaid text.<\/p>\n<p>Cloudinary offers a solution: <code>e_brightness_hsb<\/code>, a transformation that lets you adjust brightness using the HSB (Hue, Saturation, Brightness) color model. It\u2019s applied server-side, directly in the image URL.<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-7\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml shcb-wrap-lines\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">figure<\/span> <span class=\"hljs-attr\">tabindex<\/span>=<span class=\"hljs-string\">\"0\"<\/span> <span class=\"hljs-attr\">role<\/span>=<span class=\"hljs-string\">\"group\"<\/span> <span class=\"hljs-attr\">aria-label<\/span>=<span class=\"hljs-string\">\"Beach image with improved contrast for text overlay\"<\/span>&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">img<\/span>\n    <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/e_brightness_hsb:-20,w_600,q_auto,f_auto\/beach.jpg\"<\/span>\n    <span class=\"hljs-attr\">alt<\/span>=<span class=\"hljs-string\">\"Sunset beach scene brightened for better readability\"<\/span>\n    <span class=\"hljs-attr\">loading<\/span>=<span class=\"hljs-string\">\"lazy\"<\/span> \/&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">figcaption<\/span>&gt;<\/span>\n    Contrast-enhanced image<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">br<\/span> \/&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">a<\/span> <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\">\"https:\/\/cloudinary.com\/documentation\/transformation_reference#e_brightness_hsb\"<\/span> <span class=\"hljs-attr\">target<\/span>=<span class=\"hljs-string\">\"_blank\"<\/span>&gt;<\/span>\n      Cloudinary Docs: e_brightness_hsb\n    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">a<\/span>&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">figcaption<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">figure<\/span>&gt;<\/span>\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-7\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>In this example, the image has been brightened using <code>e_brightness_hsb:-20<\/code>, which decreases brightness slightly to improve contrast without washing out the photo. This can make <strong>overlaid text easier to read<\/strong>, and can help users who struggle with glare or subtle background variations.<\/p>\n<p>The transformation is also chained with <code>q_auto,f_auto<\/code> and <code>w_600<\/code>, which ensures the image is:<\/p>\n<ul>\n<li>Automatically optimized in quality and format.<\/li>\n<li>Sized for responsive rendering.<\/li>\n<li>Delivered efficiently which supports fast loading on assistive technologies and low-bandwidth devices.<\/li>\n<\/ul>\n<p>This adjustment supports the \u201cperceivable\u201d requirement in the European Accessibility Act, ensuring that content is visible and understandable for all users.<\/p>\n<p>It also follows <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/Accessibility\/Guides\/Understanding_WCAG\/Perceivable\/Color_contrast\">MDN\u2019s guidance on accessible contrast<\/a>, which recommends high contrast between foreground and background elements.<\/p>\n<blockquote>\n<p>Cloudinary documentation: <a href=\"https:\/\/cloudinary.com\/documentation\/transformation_reference#e_brightness_hsb\">e_brightness_hsb<\/a><\/p>\n<\/blockquote>\n<h2>Video Accessibility With Cloudinary\u2019s Subtitle Overlay<\/h2>\n<p>Video content can be immersive and informative but without subtitles, it excludes a significant portion of users, including those who are deaf, hard of hearing, or navigating in sound-off environments. Adding subtitles isn\u2019t just a UX improvement; it\u2019s a <strong>legal requirement<\/strong> under the European Accessibility Act and a best practice outlined by accessibility standards like WCAG.<\/p>\n<p>Cloudinary simplifies this with the <code>l_subtitles<\/code> transformation, allowing you to embed <code>.srt<\/code> subtitle files directly into videos via a URL parameter.<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-8\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml shcb-wrap-lines\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">figure<\/span> <span class=\"hljs-attr\">tabindex<\/span>=<span class=\"hljs-string\">\"0\"<\/span> <span class=\"hljs-attr\">role<\/span>=<span class=\"hljs-string\">\"group\"<\/span> <span class=\"hljs-attr\">aria-label<\/span>=<span class=\"hljs-string\">\"Dog video with English subtitles\"<\/span>&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">video<\/span> <span class=\"hljs-attr\">controls<\/span> <span class=\"hljs-attr\">aria-label<\/span>=<span class=\"hljs-string\">\"Dog video with captions\"<\/span> <span class=\"hljs-attr\">width<\/span>=<span class=\"hljs-string\">\"100%\"<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">source<\/span>\n      <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">\"https:\/\/res.cloudinary.com\/demo\/video\/upload\/l_subtitles:sample_sub_en.srt\/vc_vp9\/dog.webm\"<\/span>\n      <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\">\"video\/webm\"<\/span> \/&gt;<\/span>\n    Your browser does not support the video tag.\n  <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">video<\/span>&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">figcaption<\/span>&gt;<\/span>\n    Accessible video with English subtitles<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">br<\/span> \/&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">a<\/span> <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\">\"https:\/\/cloudinary.com\/documentation\/transformation_reference#l_subtitles\"<\/span> <span class=\"hljs-attr\">target<\/span>=<span class=\"hljs-string\">\"_blank\"<\/span>&gt;<\/span>\n      Cloudinary Docs: l_subtitles\n    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">a<\/span>&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">figcaption<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">figure<\/span>&gt;<\/span>\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-8\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<h3>What This Does<\/h3>\n<ul>\n<li>The <code>l_subtitles:sample_sub_en.srt<\/code> transformation tells Cloudinary to burn subtitles into the video using a provided subtitle file.<\/li>\n<li>These subtitles are visible by default, ensuring they\u2019re available regardless of player UI or device support.<\/li>\n<li>The <code>&lt;video&gt;<\/code> element is labeled with <code>aria-label=&quot;Dog video with captions&quot;<\/code> to make it screen reader friendly.<\/li>\n<\/ul>\n<p>This method guarantees subtitle visibility especially important when player controls may not be accessible via keyboard or assistive tech.<\/p>\n<p>The European Accessibility Act requires synchronized text alternatives for all multimedia content. This approach with Cloudinary fulfills that requirement and ensures that content remains inclusive.<\/p>\n<p>It also aligns with <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Learn_web_development\/Core\/Accessibility\/Multimedia\">MDN\u2019s multimedia accessibility guide<\/a>, which emphasizes the need for captions, transcripts, and audio alternatives in video content.<\/p>\n<blockquote>\n<p>Cloudinary documentation: <a href=\"https:\/\/cloudinary.com\/documentation\/transformation_reference#l_subtitles\">l_subtitles<\/a><\/p>\n<\/blockquote>\n<h2>Dark Mode Support With Inverted Images Using <code>e_negate<\/code><\/h2>\n<p>To support users who prefer darker themes whether for comfort, clarity, or accessibility we provide a light\/dark mode toggle. While text and backgrounds adapt easily, images can remain too bright or visually out of place.<\/p>\n<p>To help images match the dark environment, we apply Cloudinary\u2019s <code>e_negate<\/code> transformation, which generates a <strong>color-inverted (negative)<\/strong> version of the original image.<\/p>\n<p>This effect isn\u2019t always ideal for photos, but it can improve visibility for icons, diagrams, or light-on-light visuals that otherwise clash with dark backgrounds.<\/p>\n<h3>Toggle Button (HTML)<\/h3>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-9\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml shcb-wrap-lines\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">button<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"darkModeToggle\"<\/span> <span class=\"hljs-attr\">aria-pressed<\/span>=<span class=\"hljs-string\">\"false\"<\/span> <span class=\"hljs-attr\">aria-label<\/span>=<span class=\"hljs-string\">\"Toggle light and dark mode\"<\/span>&gt;<\/span>\n  Toggle Light\/Dark Mode\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">button<\/span>&gt;<\/span>\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-9\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<h3>JavaScript Logic<\/h3>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-10\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-keyword\">const<\/span> toggleBtn = <span class=\"hljs-built_in\">document<\/span>.getElementById(<span class=\"hljs-string\">'darkModeToggle'<\/span>);\n\ntoggleBtn.addEventListener(<span class=\"hljs-string\">'click'<\/span>, () =&gt; {\n  <span class=\"hljs-keyword\">const<\/span> isDark = <span class=\"hljs-built_in\">document<\/span>.body.classList.toggle(<span class=\"hljs-string\">'dark'<\/span>);\n  toggleBtn.setAttribute(<span class=\"hljs-string\">'aria-pressed'<\/span>, isDark);\n\n  <span class=\"hljs-keyword\">const<\/span> images = <span class=\"hljs-built_in\">document<\/span>.querySelectorAll(<span class=\"hljs-string\">'img'<\/span>);\n  images.forEach(<span class=\"hljs-function\"><span class=\"hljs-params\">img<\/span> =&gt;<\/span> {\n    <span class=\"hljs-keyword\">const<\/span> hasNegate = img.src.includes(<span class=\"hljs-string\">'\/e_negate\/'<\/span>);\n    <span class=\"hljs-keyword\">const<\/span> cleanSrc = img.src.replace(<span class=\"hljs-string\">'\/e_negate'<\/span>, <span class=\"hljs-string\">''<\/span>);\n\n    <span class=\"hljs-keyword\">if<\/span> (isDark &amp;&amp; !hasNegate) {\n      img.src = cleanSrc.replace(<span class=\"hljs-string\">'\/upload\/'<\/span>, <span class=\"hljs-string\">'\/upload\/e_negate\/'<\/span>);\n    } <span class=\"hljs-keyword\">else<\/span> <span class=\"hljs-keyword\">if<\/span> (!isDark &amp;&amp; hasNegate) {\n      img.src = cleanSrc.replace(<span class=\"hljs-string\">'\/e_negate\/'<\/span>, <span class=\"hljs-string\">'\/'<\/span>);\n    }\n  });\n});\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-10\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>The European Accessibility Act encourages adaptable interfaces that meet a range of visual needs.<\/p>\n<p>This technique supports <strong>perceivability<\/strong> for users who require dark mode and better contrast.<\/p>\n<blockquote>\n<p>Cloudinary documentation: <a href=\"https:\/\/cloudinary.com\/documentation\/transformation_reference#e_negate\">e_negate<\/a><\/p>\n<\/blockquote>\n<h2>Summary: Mapping Features to EAA Principles<\/h2>\n<p>This overview outlines how each feature in the accessible media gallery aligns with the four core principles of the European Accessibility Act (EAA): <strong>Perceivable<\/strong>, <strong>Operable<\/strong>, <strong>Understandable<\/strong>, and <strong>Robust<\/strong>. The features draw on Cloudinary\u2019s media transformation capabilities and MDN\u2019s accessibility best practices to create an inclusive, user-friendly media experience.<\/p>\n<h3>Feature Groupings by EAA Principle<\/h3>\n<ul>\n<li>\n<p><strong>Visual accessibility (perceivable):<\/strong><br \/>\nFeatures that enhance the visibility and comprehension of media content:<\/p>\n<ul>\n<li>\n<p><strong><code>e_assist_colorblind<\/code><\/strong>. Improves clarity for users with color vision deficiencies.<\/p>\n<\/li>\n<li>\n<p><strong><code>e_brightness_hsb<\/code><\/strong>. Adjusts image brightness for better contrast and legibility.<\/p>\n<\/li>\n<li>\n<p><strong><code>e_negate<\/code> with dark mode toggle<\/strong>. Ensures visual comfort in low-light environments.<\/p>\n<\/li>\n<li>\n<p><strong><code>l_subtitles<\/code><\/strong>. Adds subtitles to videos, aiding users with hearing impairments.<\/p>\n<\/li>\n<li>\n<p><strong><code>e_simulate_colorblind<\/code><\/strong>. Lets developers preview content as seen by color-blind users.<\/p>\n<\/li>\n<\/ul>\n<\/li>\n<li>\n<p><strong>Structure and semantics (perceivable, robust):<\/strong><br \/>\nFeatures that provide meaningful markup for assistive technologies:<\/p>\n<ul>\n<li>\n<strong>Semantic HTML (<code>figure<\/code>, <code>alt<\/code>)<\/strong>. Delivers proper structure and descriptions for screen readers.<\/li>\n<\/ul>\n<\/li>\n<li>\n<p><strong>Interactivity and control (operable, understandable):<\/strong><br \/>\nFeatures that improve navigation and usability for all users:<\/p>\n<ul>\n<li>\n<strong>ARIA attributes (<code>aria-label<\/code>, <code>aria-pressed<\/code>)<\/strong>. Communicate element roles an\nd states clearly.<\/li>\n<li>\n<strong><code>tabindex=&quot;0&quot;<\/code> on media blocks<\/strong>. Enables keyboard access to interactive content.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<h2>Final Thoughts<\/h2>\n<p>Building accessible interfaces isn\u2019t just checking boxes. You should create experiences that respect the needs of all users. By combining Cloudinary\u2019s media transformation features with semantic HTML, ARIA roles, and best practices from MDN, we\u2019ve built a media gallery that is both engaging and inclusive.<\/p>\n<p>This project shows that aligning with the <a href=\"https:\/\/commission.europa.eu\/strategy-and-policy\/policies\/justice-and-fundamental-rights\/disability\/union-equality-strategy-rights-persons-disabilities-2021-2030\/european-accessibility-act_en\">European Accessibility Act<\/a> doesn\u2019t require complex tools, just a thoughtful approach to markup, media, and interaction.<\/p>\n<p>Whether you\u2019re building a product gallery, educational resource, or content-rich website, accessible media delivery should be a core part of your workflow. Not an afterthought.<\/p>\n<p>Start small, design with empathy, and test often. Accessibility is a shared responsibility and it\u2019s good design.<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":87,"featured_media":37755,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_cloudinary_featured_overwrite":false,"footnotes":""},"categories":[1],"tags":[337],"class_list":["post-37749","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-accessibility"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v25.6 (Yoast SEO v26.9) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Building an EAA-Ready, Accessible Media Gallery With Cloudinary and MDN Standards<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/cloudinary.com\/blog\/eaa-ready-accessible-media-gallery-cloudinary-mdn-standards\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Building an EAA-Ready, Accessible Media Gallery With Cloudinary and MDN Standards\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cloudinary.com\/blog\/eaa-ready-accessible-media-gallery-cloudinary-mdn-standards\" \/>\n<meta property=\"og:site_name\" content=\"Cloudinary Blog\" \/>\n<meta property=\"article:published_time\" content=\"2025-06-10T14:00:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-06-20T16:55:23+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/v1749236926\/Web_Assets\/blog\/Blog_Building_an_EAA-Ready_Accessible_Media_Gallery_with_Cloudinary_and_MDN_Standards\/Blog_Building_an_EAA-Ready_Accessible_Media_Gallery_with_Cloudinary_and_MDN_Standards-jpg?_i=AA\" \/>\n\t<meta property=\"og:image:width\" content=\"2000\" \/>\n\t<meta property=\"og:image:height\" content=\"1100\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"melindapham\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"NewsArticle\",\"@id\":\"https:\/\/cloudinary.com\/blog\/eaa-ready-accessible-media-gallery-cloudinary-mdn-standards#article\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/eaa-ready-accessible-media-gallery-cloudinary-mdn-standards\"},\"author\":{\"name\":\"melindapham\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/0d5ad601e4c3b5be89245dfb14be42d9\"},\"headline\":\"Building an EAA-Ready, Accessible Media Gallery With Cloudinary and MDN Standards\",\"datePublished\":\"2025-06-10T14:00:00+00:00\",\"dateModified\":\"2025-06-20T16:55:23+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/eaa-ready-accessible-media-gallery-cloudinary-mdn-standards\"},\"wordCount\":11,\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/eaa-ready-accessible-media-gallery-cloudinary-mdn-standards#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1749236926\/Web_Assets\/blog\/Blog_Building_an_EAA-Ready_Accessible_Media_Gallery_with_Cloudinary_and_MDN_Standards\/Blog_Building_an_EAA-Ready_Accessible_Media_Gallery_with_Cloudinary_and_MDN_Standards.jpg?_i=AA\",\"keywords\":[\"Accessibility\"],\"inLanguage\":\"en-US\",\"copyrightYear\":\"2025\",\"copyrightHolder\":{\"@id\":\"https:\/\/cloudinary.com\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cloudinary.com\/blog\/eaa-ready-accessible-media-gallery-cloudinary-mdn-standards\",\"url\":\"https:\/\/cloudinary.com\/blog\/eaa-ready-accessible-media-gallery-cloudinary-mdn-standards\",\"name\":\"Building an EAA-Ready, Accessible Media Gallery With Cloudinary and MDN Standards\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/eaa-ready-accessible-media-gallery-cloudinary-mdn-standards#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/eaa-ready-accessible-media-gallery-cloudinary-mdn-standards#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1749236926\/Web_Assets\/blog\/Blog_Building_an_EAA-Ready_Accessible_Media_Gallery_with_Cloudinary_and_MDN_Standards\/Blog_Building_an_EAA-Ready_Accessible_Media_Gallery_with_Cloudinary_and_MDN_Standards.jpg?_i=AA\",\"datePublished\":\"2025-06-10T14:00:00+00:00\",\"dateModified\":\"2025-06-20T16:55:23+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/eaa-ready-accessible-media-gallery-cloudinary-mdn-standards#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cloudinary.com\/blog\/eaa-ready-accessible-media-gallery-cloudinary-mdn-standards\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/eaa-ready-accessible-media-gallery-cloudinary-mdn-standards#primaryimage\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1749236926\/Web_Assets\/blog\/Blog_Building_an_EAA-Ready_Accessible_Media_Gallery_with_Cloudinary_and_MDN_Standards\/Blog_Building_an_EAA-Ready_Accessible_Media_Gallery_with_Cloudinary_and_MDN_Standards.jpg?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1749236926\/Web_Assets\/blog\/Blog_Building_an_EAA-Ready_Accessible_Media_Gallery_with_Cloudinary_and_MDN_Standards\/Blog_Building_an_EAA-Ready_Accessible_Media_Gallery_with_Cloudinary_and_MDN_Standards.jpg?_i=AA\",\"width\":2000,\"height\":1100},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cloudinary.com\/blog\/eaa-ready-accessible-media-gallery-cloudinary-mdn-standards#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cloudinary.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Building an EAA-Ready, Accessible Media Gallery With Cloudinary and MDN Standards\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"name\":\"Cloudinary Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/cloudinary.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\",\"name\":\"Cloudinary Blog\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"width\":312,\"height\":60,\"caption\":\"Cloudinary Blog\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/0d5ad601e4c3b5be89245dfb14be42d9\",\"name\":\"melindapham\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/e6f989fa97fe94be61596259d8629c3df65aec4c7da5c0000f90d810f313d4f4?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/e6f989fa97fe94be61596259d8629c3df65aec4c7da5c0000f90d810f313d4f4?s=96&d=mm&r=g\",\"caption\":\"melindapham\"}}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Building an EAA-Ready, Accessible Media Gallery With Cloudinary and MDN Standards","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/cloudinary.com\/blog\/eaa-ready-accessible-media-gallery-cloudinary-mdn-standards","og_locale":"en_US","og_type":"article","og_title":"Building an EAA-Ready, Accessible Media Gallery With Cloudinary and MDN Standards","og_url":"https:\/\/cloudinary.com\/blog\/eaa-ready-accessible-media-gallery-cloudinary-mdn-standards","og_site_name":"Cloudinary Blog","article_published_time":"2025-06-10T14:00:00+00:00","article_modified_time":"2025-06-20T16:55:23+00:00","og_image":[{"width":2000,"height":1100,"url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/v1749236926\/Web_Assets\/blog\/Blog_Building_an_EAA-Ready_Accessible_Media_Gallery_with_Cloudinary_and_MDN_Standards\/Blog_Building_an_EAA-Ready_Accessible_Media_Gallery_with_Cloudinary_and_MDN_Standards-jpg?_i=AA","type":"image\/jpeg"}],"author":"melindapham","twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"NewsArticle","@id":"https:\/\/cloudinary.com\/blog\/eaa-ready-accessible-media-gallery-cloudinary-mdn-standards#article","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/eaa-ready-accessible-media-gallery-cloudinary-mdn-standards"},"author":{"name":"melindapham","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/0d5ad601e4c3b5be89245dfb14be42d9"},"headline":"Building an EAA-Ready, Accessible Media Gallery With Cloudinary and MDN Standards","datePublished":"2025-06-10T14:00:00+00:00","dateModified":"2025-06-20T16:55:23+00:00","mainEntityOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/eaa-ready-accessible-media-gallery-cloudinary-mdn-standards"},"wordCount":11,"publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/eaa-ready-accessible-media-gallery-cloudinary-mdn-standards#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1749236926\/Web_Assets\/blog\/Blog_Building_an_EAA-Ready_Accessible_Media_Gallery_with_Cloudinary_and_MDN_Standards\/Blog_Building_an_EAA-Ready_Accessible_Media_Gallery_with_Cloudinary_and_MDN_Standards.jpg?_i=AA","keywords":["Accessibility"],"inLanguage":"en-US","copyrightYear":"2025","copyrightHolder":{"@id":"https:\/\/cloudinary.com\/#organization"}},{"@type":"WebPage","@id":"https:\/\/cloudinary.com\/blog\/eaa-ready-accessible-media-gallery-cloudinary-mdn-standards","url":"https:\/\/cloudinary.com\/blog\/eaa-ready-accessible-media-gallery-cloudinary-mdn-standards","name":"Building an EAA-Ready, Accessible Media Gallery With Cloudinary and MDN Standards","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/eaa-ready-accessible-media-gallery-cloudinary-mdn-standards#primaryimage"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/eaa-ready-accessible-media-gallery-cloudinary-mdn-standards#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1749236926\/Web_Assets\/blog\/Blog_Building_an_EAA-Ready_Accessible_Media_Gallery_with_Cloudinary_and_MDN_Standards\/Blog_Building_an_EAA-Ready_Accessible_Media_Gallery_with_Cloudinary_and_MDN_Standards.jpg?_i=AA","datePublished":"2025-06-10T14:00:00+00:00","dateModified":"2025-06-20T16:55:23+00:00","breadcrumb":{"@id":"https:\/\/cloudinary.com\/blog\/eaa-ready-accessible-media-gallery-cloudinary-mdn-standards#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cloudinary.com\/blog\/eaa-ready-accessible-media-gallery-cloudinary-mdn-standards"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/eaa-ready-accessible-media-gallery-cloudinary-mdn-standards#primaryimage","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1749236926\/Web_Assets\/blog\/Blog_Building_an_EAA-Ready_Accessible_Media_Gallery_with_Cloudinary_and_MDN_Standards\/Blog_Building_an_EAA-Ready_Accessible_Media_Gallery_with_Cloudinary_and_MDN_Standards.jpg?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1749236926\/Web_Assets\/blog\/Blog_Building_an_EAA-Ready_Accessible_Media_Gallery_with_Cloudinary_and_MDN_Standards\/Blog_Building_an_EAA-Ready_Accessible_Media_Gallery_with_Cloudinary_and_MDN_Standards.jpg?_i=AA","width":2000,"height":1100},{"@type":"BreadcrumbList","@id":"https:\/\/cloudinary.com\/blog\/eaa-ready-accessible-media-gallery-cloudinary-mdn-standards#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cloudinary.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Building an EAA-Ready, Accessible Media Gallery With Cloudinary and MDN Standards"}]},{"@type":"WebSite","@id":"https:\/\/cloudinary.com\/blog\/#website","url":"https:\/\/cloudinary.com\/blog\/","name":"Cloudinary Blog","description":"","publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/cloudinary.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/cloudinary.com\/blog\/#organization","name":"Cloudinary Blog","url":"https:\/\/cloudinary.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","width":312,"height":60,"caption":"Cloudinary Blog"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/0d5ad601e4c3b5be89245dfb14be42d9","name":"melindapham","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/e6f989fa97fe94be61596259d8629c3df65aec4c7da5c0000f90d810f313d4f4?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/e6f989fa97fe94be61596259d8629c3df65aec4c7da5c0000f90d810f313d4f4?s=96&d=mm&r=g","caption":"melindapham"}}]}},"jetpack_featured_media_url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1749236926\/Web_Assets\/blog\/Blog_Building_an_EAA-Ready_Accessible_Media_Gallery_with_Cloudinary_and_MDN_Standards\/Blog_Building_an_EAA-Ready_Accessible_Media_Gallery_with_Cloudinary_and_MDN_Standards.jpg?_i=AA","_links":{"self":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/37749","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/users\/87"}],"replies":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/comments?post=37749"}],"version-history":[{"count":6,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/37749\/revisions"}],"predecessor-version":[{"id":37794,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/37749\/revisions\/37794"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media\/37755"}],"wp:attachment":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media?parent=37749"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/categories?post=37749"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/tags?post=37749"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}