{"id":691,"date":"2025-03-13T13:42:39","date_gmt":"2025-03-13T20:42:39","guid":{"rendered":"https:\/\/comm.engineering.asu.edu\/pitchfork\/?p=691"},"modified":"2025-03-21T13:37:52","modified_gmt":"2025-03-21T20:37:52","slug":"3-accessibility-basics","status":"publish","type":"post","link":"https:\/\/comm.engineering.asu.edu\/pitchfork\/2025\/03\/3-accessibility-basics\/","title":{"rendered":"3. Accessibility basics"},"content":{"rendered":"\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-4-3 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"3. Accessibility Basics\" width=\"500\" height=\"375\" src=\"https:\/\/www.youtube.com\/embed\/bNRU7s71j6o?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"accessibility\" style=\"padding-top:var(--wp--preset--spacing--uds-size-6)\"><span class=\"highlight-gold\">What is accessibility?<\/span><\/h2>\n\n\n\n<div class=\"wp-block-columns has-gray-1-background-color has-background is-layout-flex wp-container-core-columns-is-layout-28f84493 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:66.66%\"><div  class=\"uds-blockquote accent-gold\" style=\"\">\n\t<svg title=\"Open quote\" role=\"presentation\" viewBox=\"0 0 302.87 245.82\">\n\t<path d=\"M113.61,245.82H0V164.56q0-49.34,8.69-77.83T40.84,35.58Q64.29,12.95,100.67,0l22.24,46.9q-34,11.33-48.72,31.54T58.63,132.21h55Zm180,0H180V164.56q0-49.74,8.7-78T221,35.58Q244.65,12.95,280.63,0l22.24,46.9q-34,11.33-48.72,31.54t-15.57,53.77h55Z\"\/>\n\t<\/svg><blockquote><p>Digital accessibility means making your online content accessible to everyone, regardless of their abilities or the device they are using. <\/p>\n<p>Often, simple changes can improve access for people with visual, auditory, motor and cognitive disabilities.<\/p>\n<div class=\"citation\"><div class=\"citation-content\"><cite class=\"name\">Adapted from the ASU IT Accessibility website<\/cite><cite class=\"description\"><\/cite><\/div><\/div><\/blockquote><\/div>\n\n\n<p class=\"is-style-lead\">There are <strong>four simple things<\/strong> you can do that go a long way towards making your web content accessible.<\/p>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-group is-layout-constrained wp-block-group-is-layout-constrained\" style=\"padding-top:var(--wp--preset--spacing--uds-size-4)\">\n<h2 class=\"wp-block-heading\" id=\"info-structure\" style=\"padding-top:var(--wp--preset--spacing--uds-size-6)\">1. <span class=\"highlight-gold\">Use c<strong>orrect information structure<\/strong><\/span><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"highlight-black\">Use ordered headings<\/span><\/h3>\n\n\n\n<p>The content of a webpage should be<strong> structured like an organized outline<\/strong>, with headings, subheadings, and sub items under those headings<\/p>\n\n\n\n<p>Heading<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Sub headings\n<ul class=\"wp-block-list\">\n<li>Sub items<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<p><strong>HTML has heading structure<\/strong> to match these components, and they should be used to represent your content in a similar way<\/p>\n\n\n\n<p>Heading 1 (H1)<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Heading 2 (H2)\n<ul class=\"wp-block-list\">\n<li>Heading 3 (H3)\n<ul class=\"wp-block-list\">\n<li>Paragraph 1<\/li>\n\n\n\n<li>Paragraph 2<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Heading 3<\/li>\n\n\n\n<li>Heading 3\n<ul class=\"wp-block-list\">\n<li>Heading 4\n<ul class=\"wp-block-list\">\n<li>Paragraph 1<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Heading 4\n<ul class=\"wp-block-list\">\n<li>Paragraph 1<\/li>\n\n\n\n<li>Paragraph 2<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<p>HTML has 6 levels of headings, though typically you\u2019ll only use up to 4, depending on your content.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong><span class=\"highlight-black\">How to set headings in Pitchfork<\/span><\/strong><\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">Add a <strong>Heading block<\/strong><\/h4>\n\n\n\n<ol class=\"wp-block-list\">\n<li>In the block prompt, type \/heading or click the block inserter and choose the Heading block.<\/li>\n<\/ol>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-28f84493 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:33%\">\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"279\" height=\"117\" src=\"https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2024\/05\/Screenshot-2024-05-30-at-12.51.37\u202fPM.png\" alt=\"Screenshot of inserting a Heading block in WordPress by typing &quot;\/head&quot; in the block prompt field.\" class=\"wp-image-228\"\/><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:66.66%\">\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"226\" height=\"312\" src=\"https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2024\/05\/Screenshot-2024-05-30-at-12.51.53\u202fPM.png\" alt=\"Screenshot of inserting a Heading block in WordPress by using the block inserter and choosing &quot;Heading&quot;\" class=\"wp-image-227\" srcset=\"https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2024\/05\/Screenshot-2024-05-30-at-12.51.53\u202fPM.png 226w, https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2024\/05\/Screenshot-2024-05-30-at-12.51.53\u202fPM-217x300.png 217w\" sizes=\"auto, (max-width: 226px) 100vw, 226px\" \/><\/figure>\n<\/div>\n<\/div>\n\n\n\n<ol start=\"2\" class=\"wp-block-list\">\n<li>Change the heading level. The default heading level is H2. To change the heading level, click the &#8220;H2&#8221; and choose the correct heading from the list.<\/li>\n<\/ol>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-28f84493 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:33.33%\">\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"518\" height=\"383\" src=\"https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2024\/05\/Screenshot-2024-05-30-at-1.25.29\u202fPM.png\" alt=\"Screenshot of the heading options in the Heading block in WordPress.\" class=\"wp-image-229\" srcset=\"https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2024\/05\/Screenshot-2024-05-30-at-1.25.29\u202fPM.png 518w, https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2024\/05\/Screenshot-2024-05-30-at-1.25.29\u202fPM-300x222.png 300w\" sizes=\"auto, (max-width: 518px) 100vw, 518px\" \/><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:66.66%\"><\/div>\n<\/div>\n\n\n\n<ol start=\"3\" class=\"wp-block-list\">\n<li>You may highlight your entire heading or part of the heading. \n<ol class=\"wp-block-list\">\n<li>Select the text you want to highlight. <img loading=\"lazy\" decoding=\"async\" width=\"711\" height=\"83\" class=\"wp-image-230\" style=\"width: 500px\" src=\"https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2024\/05\/Screenshot-2024-05-30-at-1.33.49\u202fPM.png\" alt=\"Screenshot of an example of highlighted text in a WordPress heading block\" srcset=\"https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2024\/05\/Screenshot-2024-05-30-at-1.33.49\u202fPM.png 711w, https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2024\/05\/Screenshot-2024-05-30-at-1.33.49\u202fPM-300x35.png 300w\" sizes=\"auto, (max-width: 711px) 100vw, 711px\" \/><\/li>\n\n\n\n<li>Open the &#8220;More&#8221; menu (down carat). <br><img loading=\"lazy\" decoding=\"async\" width=\"440\" height=\"495\" class=\"wp-image-231\" style=\"width: 500px\" src=\"https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2024\/05\/Screenshot-2024-05-30-at-1.34.10\u202fPM.png\" alt=\"Screenshot of options available in the &quot;more&quot; menu of a WordPress heading block.\" srcset=\"https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2024\/05\/Screenshot-2024-05-30-at-1.34.10\u202fPM.png 440w, https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2024\/05\/Screenshot-2024-05-30-at-1.34.10\u202fPM-267x300.png 267w\" sizes=\"auto, (max-width: 440px) 100vw, 440px\" \/><\/li>\n\n\n\n<li>Choose a UDS highlight option: gold highlight, black highlight, white highlight (for dark backgrounds). Here is an example of gold highlight:<img loading=\"lazy\" decoding=\"async\" width=\"704\" height=\"68\" class=\"wp-image-232\" style=\"width: 500px\" src=\"https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2024\/05\/Screenshot-2024-05-30-at-1.34.22\u202fPM.png\" alt=\"Example of highlighted heading text in ASU Gold.\" srcset=\"https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2024\/05\/Screenshot-2024-05-30-at-1.34.22\u202fPM.png 704w, https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2024\/05\/Screenshot-2024-05-30-at-1.34.22\u202fPM-300x29.png 300w\" sizes=\"auto, (max-width: 704px) 100vw, 704px\" \/><\/li>\n<\/ol>\n<\/li>\n<\/ol>\n\n\n\n<div class=\"wp-block-group has-gray-2-background-color has-background is-layout-constrained wp-container-core-group-is-layout-9a25b7b8 wp-block-group-is-layout-constrained\" style=\"padding-top:var(--wp--preset--spacing--uds-size-4);padding-right:var(--wp--preset--spacing--uds-size-4);padding-bottom:var(--wp--preset--spacing--uds-size-4);padding-left:var(--wp--preset--spacing--uds-size-4)\">\n<h3 class=\"wp-block-heading\"><span class=\"highlight-black\">More about <strong>color contrast options for text<\/strong><\/span><\/h3>\n\n\n\n<p>Your text color and background colors must be high contrast to be accessible to those with vision differences.<\/p>\n\n\n\n<p>Most of the pre-defined color options are accessible, though expect to see a reminder when you manipulate the colors manually. To see which ASU brand color combinations are accessible, see the <a href=\"https:\/\/docs.google.com\/presentation\/d\/1rVIuKL6waZ03pnByWMoX_aTNn8QyjsiWMoYNnFbXI44\/edit#slide=id.g2b0b1c08b39_0_151\">Accessible text and background color combinations guide<\/a>.<\/p>\n\n\n\n<p>Remember that although a color combination is accessible, that does not mean it is recommended. Some text\/background color combinations are accessible but not allowed for regular \u201cparagraph\u201d web text by ASU brand standards, but may be only allowed in Headings or in text inside of web graphics.&nbsp;<\/p>\n\n\n\n<p>Examples: black text on gold, maroon text on gold, and gold text on maroon are accessible, but to not meet ASU web standards or web best practices.&nbsp; However in Headings, these combinations would be allowed in some cases.<\/p>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-group is-layout-constrained wp-block-group-is-layout-constrained\" style=\"padding-top:var(--wp--preset--spacing--uds-size-4)\">\n<h2 class=\"wp-block-heading\" id=\"links-buttons\" style=\"padding-top:var(--wp--preset--spacing--uds-size-6)\">2. <span class=\"highlight-gold\">Make informative links and buttons<\/span><\/h2>\n\n\n\n<p>Screen readers are an assistive technology that will read web content aloud for those with visual disabilities. <\/p>\n\n\n\n<p>When you make a text link, screen readers will read the text link aloud. For this reason, the link text needs to explain what action happen when the link is clicked.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"highlight-black\">Example 1<\/span><\/h3>\n\n\n\n<p><i class=\"fa-solid fa-thumbs-down\"><\/i> <a href=\"#\">Click here<\/a> to learn about our new master&#8217;s degree program.<\/p>\n\n\n\n<p><i class=\"fa-solid fa-thumbs-up\"><\/i> <a href=\"#\">Learn about our new master&#8217;s degree program.<\/a><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"highlight-black\">Example 2<\/span><\/h3>\n\n\n\n<p> You can read about our transfer credit options by reading <a href=\"#\">this<\/a> guide.<\/p>\n\n\n\n<p><i class=\"fa-solid fa-thumbs-up\"><\/i> <a href=\"#\">Read our transfer credit options guide<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"highlight-black\">Example 3<\/span><\/h3>\n\n\n\n<p><i class=\"fa-solid fa-thumbs-down\"><\/i> You can self-enroll into the New Student Orientation Canvas course <a href=\"#\">here<\/a>.<\/p>\n\n\n\n<p><i class=\"fa-solid fa-thumbs-up\"><\/i> <a href=\"#\">Self-enroll in the New Student Orientation Canvas course<\/a>.<\/p>\n\n\n\n<p>An easy rule to follow is: <strong>Never use \u201cclick here,\u201d &#8220;this&#8221; or \u201chere\u201d links.<\/strong> Use <strong>actionable, descriptive text<\/strong> that tells the reader what will happen when they click. <\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Descriptive links <span class=\"highlight-black\">improve usability for all<\/span><\/h3>\n\n\n\n<p>Like most accessibility changes, using descriptive links improves website usability for everyone. If you look at the examples, which links are easier to see? Which have clearer language? The more descriptive links improve the experience for all users.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-group is-layout-constrained wp-block-group-is-layout-constrained\" style=\"padding-top:var(--wp--preset--spacing--uds-size-4)\">\n<h2 class=\"wp-block-heading\" id=\"image_alt_text\" style=\"padding-top:var(--wp--preset--spacing--uds-size-6)\">3. <span class=\"highlight-gold\">Always write alt text for images<\/span><\/h2>\n\n\n\n<p>Like descriptive links, screen readers also read out descriptive text for images. You provide that text. It is called alternative text, or alt text.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"highlight-black\">How to write good alt text<\/span><\/h3>\n\n\n\n<p>Start by asking yourself two questions:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Why is this image important<\/strong> for the content it is near?<\/li>\n\n\n\n<li><strong>What do I need to describe<\/strong> in order to convey the image and its importance?<\/li>\n<\/ul>\n\n\n\n<p>Remember that your description is replacing or enhancing the ability to look at the image, so capture what is happening, but also the mood or other engaging details. Use these examples as guides.<\/p>\n\n\n\n<div class=\"wp-block-group is-layout-constrained wp-block-group-is-layout-constrained\">\n<h4 class=\"wp-block-heading\">Example 1<\/h4>\n\n\n\n<div class=\"wp-block-media-text is-stacked-on-mobile\"><figure class=\"wp-block-media-text__media\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"683\" src=\"https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2024\/05\/240429_asu_employability_-_graduation_extra_asu_news_story_-_2400x1350_asu_news_article_lead_photo_-_headline_on_top_1_v1_final_3x2-hero-1024x683.jpg\" alt=\"An ASU student wearing a maroon graduation robe and a kente cloth stole stands proudly next to ASU President Michael Crow, who wears a ceremonial robe adorned with medals.\" class=\"wp-image-233 size-full\" srcset=\"https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2024\/05\/240429_asu_employability_-_graduation_extra_asu_news_story_-_2400x1350_asu_news_article_lead_photo_-_headline_on_top_1_v1_final_3x2-hero-1024x683.jpg 1024w, https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2024\/05\/240429_asu_employability_-_graduation_extra_asu_news_story_-_2400x1350_asu_news_article_lead_photo_-_headline_on_top_1_v1_final_3x2-hero-300x200.jpg 300w, https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2024\/05\/240429_asu_employability_-_graduation_extra_asu_news_story_-_2400x1350_asu_news_article_lead_photo_-_headline_on_top_1_v1_final_3x2-hero-768x512.jpg 768w, https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2024\/05\/240429_asu_employability_-_graduation_extra_asu_news_story_-_2400x1350_asu_news_article_lead_photo_-_headline_on_top_1_v1_final_3x2-hero-1536x1025.jpg 1536w, https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2024\/05\/240429_asu_employability_-_graduation_extra_asu_news_story_-_2400x1350_asu_news_article_lead_photo_-_headline_on_top_1_v1_final_3x2-hero.jpg 2000w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure><div class=\"wp-block-media-text__content\">\n<div class=\"wp-block-group has-gray-2-background-color has-background is-layout-constrained wp-container-core-group-is-layout-38fe34b4 wp-block-group-is-layout-constrained\" style=\"padding-top:var(--wp--preset--spacing--uds-size-2);padding-right:var(--wp--preset--spacing--uds-size-2);padding-bottom:var(--wp--preset--spacing--uds-size-2);padding-left:var(--wp--preset--spacing--uds-size-2)\">\n<h4 class=\"wp-block-heading\">Alt text<\/h4>\n\n\n\n<p>An ASU student wearing a maroon graduation robe and a kente cloth stole smiles as he stands proudly next to ASU President Michael Crow, who wears a ceremonial robe adorned with medals.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-group has-gray-7-background-color has-background is-layout-constrained wp-container-core-group-is-layout-38fe34b4 wp-block-group-is-layout-constrained\" style=\"padding-top:var(--wp--preset--spacing--uds-size-2);padding-right:var(--wp--preset--spacing--uds-size-2);padding-bottom:var(--wp--preset--spacing--uds-size-2);padding-left:var(--wp--preset--spacing--uds-size-2)\">\n<h4 class=\"wp-block-heading has-white-color has-text-color has-link-color wp-elements-e591999b356b4c5df0ec05cd761967ac\">Why is this good alt text?<\/h4>\n\n\n\n<p class=\"has-white-color has-text-color has-link-color wp-elements-2d94f7d345613ea35a367b34d3ca6231\">It describes the scene, but also conveys the mood of the subjects by indicating they are smiling and that the graduate seems proud.<\/p>\n<\/div>\n<\/div><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-group is-layout-constrained wp-block-group-is-layout-constrained\">\n<h4 class=\"wp-block-heading\">Example 2<\/h4>\n\n\n\n<div class=\"wp-block-media-text has-media-on-the-right is-stacked-on-mobile\"><div class=\"wp-block-media-text__content\">\n<div class=\"wp-block-group has-gray-2-background-color has-background is-layout-constrained wp-container-core-group-is-layout-38fe34b4 wp-block-group-is-layout-constrained\" style=\"padding-top:var(--wp--preset--spacing--uds-size-2);padding-right:var(--wp--preset--spacing--uds-size-2);padding-bottom:var(--wp--preset--spacing--uds-size-2);padding-left:var(--wp--preset--spacing--uds-size-2)\">\n<h4 class=\"wp-block-heading\">Alt text<\/h4>\n\n\n\n<p>An ASU student athlete in an ASU-branded maroon hoodie and brown pants descends an American Airlines airplane stairway, holding a smartphone in one hand and a maroon Adidas duffel bag in the other.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-group has-gray-7-background-color has-background is-layout-constrained wp-container-core-group-is-layout-38fe34b4 wp-block-group-is-layout-constrained\" style=\"padding-top:var(--wp--preset--spacing--uds-size-2);padding-right:var(--wp--preset--spacing--uds-size-2);padding-bottom:var(--wp--preset--spacing--uds-size-2);padding-left:var(--wp--preset--spacing--uds-size-2)\">\n<h4 class=\"wp-block-heading has-white-color has-text-color has-link-color wp-elements-e591999b356b4c5df0ec05cd761967ac\">Why is this good alt text?<\/h4>\n\n\n\n<p class=\"has-white-color has-text-color has-link-color wp-elements-7e3d8fad975c0ecf6ddf284a88d54af0\">It describes the scene well and provides the airline name and other brand names, which can help individuals with low vision discern the details of the image. This is not always required, but can be helpful.<\/p>\n<\/div>\n<\/div><figure class=\"wp-block-media-text__media\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"682\" src=\"https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2024\/05\/IMG_0248_3x2-hero-1024x682.jpg\" alt=\"An ASU student athlete in an ASU-branded maroon hoodie and brown pants descends an American Airlines airplane stairway, holding a smartphone in one hand and a maroon Adidas duffel bag in the other.\" class=\"wp-image-234 size-full\" srcset=\"https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2024\/05\/IMG_0248_3x2-hero-1024x682.jpg 1024w, https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2024\/05\/IMG_0248_3x2-hero-300x200.jpg 300w, https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2024\/05\/IMG_0248_3x2-hero-768x512.jpg 768w, https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2024\/05\/IMG_0248_3x2-hero-1536x1024.jpg 1536w, https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2024\/05\/IMG_0248_3x2-hero.jpg 2000w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-group is-layout-constrained wp-block-group-is-layout-constrained\">\n<h4 class=\"wp-block-heading\">Example 3<\/h4>\n\n\n\n<div class=\"wp-block-media-text is-stacked-on-mobile\"><figure class=\"wp-block-media-text__media\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"683\" src=\"https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2024\/05\/2400x1350_asu_news_article_lead_photo_-_headline_on_top_2_3x2-hero-1024x683.jpg\" alt=\"A woman is captured in a moment of wonder, her profile illuminated by the stylized addition of vibrant light trails swirling around her hand.\" class=\"wp-image-235 size-full\" srcset=\"https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2024\/05\/2400x1350_asu_news_article_lead_photo_-_headline_on_top_2_3x2-hero-1024x683.jpg 1024w, https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2024\/05\/2400x1350_asu_news_article_lead_photo_-_headline_on_top_2_3x2-hero-300x200.jpg 300w, https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2024\/05\/2400x1350_asu_news_article_lead_photo_-_headline_on_top_2_3x2-hero-768x512.jpg 768w, https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2024\/05\/2400x1350_asu_news_article_lead_photo_-_headline_on_top_2_3x2-hero-1536x1025.jpg 1536w, https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2024\/05\/2400x1350_asu_news_article_lead_photo_-_headline_on_top_2_3x2-hero.jpg 2000w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure><div class=\"wp-block-media-text__content\">\n<div class=\"wp-block-group has-gray-2-background-color has-background is-layout-constrained wp-container-core-group-is-layout-38fe34b4 wp-block-group-is-layout-constrained\" style=\"padding-top:var(--wp--preset--spacing--uds-size-2);padding-right:var(--wp--preset--spacing--uds-size-2);padding-bottom:var(--wp--preset--spacing--uds-size-2);padding-left:var(--wp--preset--spacing--uds-size-2)\">\n<h4 class=\"wp-block-heading\">Alt text<\/h4>\n\n\n\n<p>A woman is captured in a moment of wonder, her profile illuminated by the stylized addition of vibrant light trails swirling around her hand.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-group has-gray-7-background-color has-background is-layout-constrained wp-container-core-group-is-layout-38fe34b4 wp-block-group-is-layout-constrained\" style=\"padding-top:var(--wp--preset--spacing--uds-size-2);padding-right:var(--wp--preset--spacing--uds-size-2);padding-bottom:var(--wp--preset--spacing--uds-size-2);padding-left:var(--wp--preset--spacing--uds-size-2)\">\n<h4 class=\"wp-block-heading has-white-color has-text-color has-link-color wp-elements-e591999b356b4c5df0ec05cd761967ac\">Why is this good alt text?<\/h4>\n\n\n\n<p class=\"has-white-color has-text-color has-link-color wp-elements-d35e9053384fff49042f1defd56b1a20\">This image combines a photo of a woman with the artistic addition of light trails. The alt text captures the woman&#8217;s mood of wonder and let&#8217;s the viewer know the trails of light are an artistic addition.<\/p>\n<\/div>\n<\/div><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-group is-layout-constrained wp-block-group-is-layout-constrained\">\n<h4 class=\"wp-block-heading\">Example 4<\/h4>\n\n\n\n<div class=\"wp-block-media-text has-media-on-the-right is-stacked-on-mobile\"><div class=\"wp-block-media-text__content\">\n<div class=\"wp-block-group has-gray-2-background-color has-background is-layout-constrained wp-container-core-group-is-layout-38fe34b4 wp-block-group-is-layout-constrained\" style=\"padding-top:var(--wp--preset--spacing--uds-size-2);padding-right:var(--wp--preset--spacing--uds-size-2);padding-bottom:var(--wp--preset--spacing--uds-size-2);padding-left:var(--wp--preset--spacing--uds-size-2)\">\n<h4 class=\"wp-block-heading\">Alt text<\/h4>\n\n\n\n<p>Portrait of Houqiang Fu on a maroon and gold artistic background.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-group has-gray-7-background-color has-background is-layout-constrained wp-container-core-group-is-layout-38fe34b4 wp-block-group-is-layout-constrained\" style=\"padding-top:var(--wp--preset--spacing--uds-size-2);padding-right:var(--wp--preset--spacing--uds-size-2);padding-bottom:var(--wp--preset--spacing--uds-size-2);padding-left:var(--wp--preset--spacing--uds-size-2)\">\n<h4 class=\"wp-block-heading has-white-color has-text-color has-link-color wp-elements-e591999b356b4c5df0ec05cd761967ac\">Why is this good alt text?<\/h4>\n\n\n\n<p class=\"has-white-color has-text-color has-link-color wp-elements-93f40c02bb61e66ec353fa2ccc330267\">The simplest of alt texts for this image would be &#8220;Houqiang Fu,&#8221; as the rest of the image does not contribute meaning to the content. However, adding &#8220;portrait of&#8221; before the subject&#8217;s name and a quick description of the background lets the reader know more about the type of image is displayed.<\/p>\n<\/div>\n<\/div><figure class=\"wp-block-media-text__media\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"683\" src=\"https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2024\/05\/Houqiang-Fu-NSF-CAREERAward-1090x720-2-3x2-hero-2-1-1024x683.jpg\" alt=\"Portrait of Houqiang Fu on a maroon and gold artistic background.\" class=\"wp-image-236 size-full\" srcset=\"https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2024\/05\/Houqiang-Fu-NSF-CAREERAward-1090x720-2-3x2-hero-2-1-1024x683.jpg 1024w, https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2024\/05\/Houqiang-Fu-NSF-CAREERAward-1090x720-2-3x2-hero-2-1-300x200.jpg 300w, https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2024\/05\/Houqiang-Fu-NSF-CAREERAward-1090x720-2-3x2-hero-2-1-768x512.jpg 768w, https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2024\/05\/Houqiang-Fu-NSF-CAREERAward-1090x720-2-3x2-hero-2-1.jpg 1080w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div>\n<\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"highlight-black\">How to add alt text to an image<\/span><\/h3>\n\n\n\n<p>When you upload an image to your website, you type in the alt text in the alt text field.<\/p>\n\n\n\n<p>When adding an image, look for this field in the media library interface, and type in the alt text: <br><img loading=\"lazy\" decoding=\"async\" width=\"1035\" height=\"457\" class=\"wp-image-238\" style=\"width: 800px\" src=\"https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2024\/05\/Screenshot-2024-05-31-at-10.22.43\u202fAM.png\" alt=\"Screenshot showing the WordPress media library interface for images, highlighting where to add alt text and where to expand the alt text field.\" srcset=\"https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2024\/05\/Screenshot-2024-05-31-at-10.22.43\u202fAM.png 1035w, https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2024\/05\/Screenshot-2024-05-31-at-10.22.43\u202fAM-300x132.png 300w, https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2024\/05\/Screenshot-2024-05-31-at-10.22.43\u202fAM-1024x452.png 1024w, https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2024\/05\/Screenshot-2024-05-31-at-10.22.43\u202fAM-768x339.png 768w\" sizes=\"auto, (max-width: 1035px) 100vw, 1035px\" \/><\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-group is-layout-constrained wp-block-group-is-layout-constrained\" style=\"padding-top:var(--wp--preset--spacing--uds-size-4)\">\n<h2 class=\"wp-block-heading\" id=\"plain-language\" style=\"padding-top:var(--wp--preset--spacing--uds-size-6)\">4. <span class=\"highlight-gold\">Use plain language<\/span><\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>The use of plain language feels contrary to a university environment, but it is a must for accessibility.<\/li>\n\n\n\n<li>Why? Several reasons:\n<ul class=\"wp-block-list\">\n<li><strong>Efficient communication<\/strong>: Webpages are skimmed, not read. Speed matters, getting to the point matters. Plain language accomplishes this.<\/li>\n\n\n\n<li><strong>Improved understanding and trust<\/strong>: Readers comprehend information more rapidly, and because they understand it, <strong>trust<\/strong> it (and us) more.<\/li>\n\n\n\n<li><strong>More likely to complete instructions correctly<\/strong>: Plain language ensures readers will understand and follow instructions correctly, leading to better compliance with instructions and requirements. We have a lot of instructions out there for our students to follow!<\/li>\n\n\n\n<li><strong>Preventing misunderstandings<\/strong>: There is less chance of information being misunderstood, reducing the time spent on follow-up clarifications.<\/li>\n\n\n\n<li><strong>Accessibility for All:<\/strong> Plain language ensures that information is accessible to a broader audience, including readers with cognitive disabilities, low literacy levels or other neurodivergence, and\/or whose primary language is not English. 26% of our 2023-24 students are international, so this is very important.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/div>\n\n\n<div  class=\"uds-image-overlap content-left \" style=\"\"><img decoding=\"async\" class=\"img-fluid ml-auto\" src=\"https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2024\/05\/compare-fibre-Y8TiLvKnLeg-unsplash-3x2-hero.jpg\" alt=\"A person wearing a red shirt and headphones sits at a laptop computer holding a pen.\" \/><div class=\"content-wrapper\"><div class=\"acf-innerblocks-container\">\n\n<h2 class=\"wp-block-heading\"><strong><span class=\"highlight-gold\">It\u2019s the law.<\/span><\/strong><\/h2>\n\n\n\n<p>ASU, like all universities, are required by law to provide accessible websites under the Americans with Disabilities Act (ADA) and Section 504 of the Rehabilitation Act.&nbsp;<\/p>\n\n\n\n<p>In 2023, accessibility compliance moved into the U.S. Department of Justice, and accessibility laws became civil rights, <strong>making violations of those laws a violation of a person\u2019s civil rights.<\/strong>&nbsp;<\/p>\n\n\n\n<p>So besides being the right thing to do, it is a requirement and must be followed.&nbsp;<\/p>\n\n\n\n<p><strong>Good news!<\/strong> Many accessibility requirements are \u201cbaked in\u201d to our Pitchfork theme, so as long as you follow the recommendations above, you will have done a lot to make your written content and images accessible.<\/p>\n\n<\/div><\/div><\/div>\n\n\n<h2 class=\"wp-block-heading\" id=\"test_site\" style=\"padding-top:var(--wp--preset--spacing--uds-size-6)\"><strong>Did you know <span class=\"highlight-gold\">you can test your site?<\/span><\/strong><\/h2>\n\n\n\n<p>ASU provides an accessibility self-audit that requires no knowledge of code. Try it out if you like!<\/p>\n\n\n\n<p><a href=\"https:\/\/accessibility.asu.edu\/testing\/audit\">https:\/\/accessibility.asu.edu\/testing\/audit<\/a><\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-copy-divider\"\/>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"references\" style=\"padding-top:var(--wp--preset--spacing--uds-size-4)\"><span class=\"highlight-black\">References\/Further reading<\/span><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"highlight-gold\">Ever heard of WCAG?<\/span><\/h3>\n\n\n\n<p>\u201cWi-cag\u201d is how people pronounce WCAG, which is the Web Content Accessibility Guidelines international standards. These standards are wide and deep, updated regularly, and have gradations of compliance: A, AA and AAA (AAA being the highest). ASU is required to meet AA level compliance.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"highlight-gold\">Additional references<\/span><\/h3>\n\n\n\n<p>Most of these references are from the <a href=\"https:\/\/accessibility.asu.edu\/\">ASU\u2019s Accessibility website<\/a>, which is loaded with additional info and relevant examples.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Headings: <a href=\"https:\/\/accessibility.asu.edu\/articles\/headings\">https:\/\/accessibility.asu.edu\/articles\/headings<\/a>&nbsp;<\/li>\n\n\n\n<li>Informative links and buttons: <a href=\"https:\/\/accessibility.asu.edu\/articles\/links\">https:\/\/accessibility.asu.edu\/articles\/links<\/a>&nbsp;<\/li>\n\n\n\n<li>Alt text: <a href=\"https:\/\/accessibility.asu.edu\/articles\/images\">https:\/\/accessibility.asu.edu\/articles\/images<\/a>&nbsp;<\/li>\n\n\n\n<li>Plain language: <a href=\"https:\/\/www.plainlanguage.gov\/about\/benefits\/\">https:\/\/www.plainlanguage.gov\/about\/benefits\/<\/a> and <a href=\"https:\/\/accessibility.asu.edu\/articles\/writing\">https:\/\/accessibility.asu.edu\/articles\/writing<\/a>&nbsp;<\/li>\n\n\n\n<li>It\u2019s the law:\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/titleix.ucr.edu\/sites\/default\/files\/2023-05\/5-19-23-doj-dear-colleague-letter-on-online-accessibility-at-postsecondary-institutions.pdf\">May 2023 letter from DoJ explaining accessibility shifting to become a civil right<\/a>.&nbsp;<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<div class=\"wp-block-group is-layout-constrained wp-block-group-is-layout-constrained\">\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-copy-divider\"\/>\n\n\n\n<div class=\"wp-block-group is-content-justification-space-between is-nowrap is-layout-flex wp-container-core-group-is-layout-b4f274ad wp-block-group-is-layout-flex\">\n<div class=\"wp-block-group is-layout-constrained wp-container-core-group-is-layout-e11bbbc3 wp-block-group-is-layout-constrained\">\n<h3 class=\"wp-block-heading\"><i class=\"fa-solid fa-left-long\"><\/i> Previous<\/h3>\n\n\n\n<p><a href=\"https:\/\/comm.engineering.asu.edu\/pitchfork\/2025\/03\/2-getting-to-know-the-dashboard\/\">2. Getting to know the dashboard<\/a><\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-group is-layout-flow wp-container-core-group-is-layout-084875ca wp-block-group-is-layout-flow\">\n<h3 class=\"wp-block-heading\">Next <i class=\"fa-solid fa-right-long\"><\/i><\/h3>\n\n\n\n<p><a href=\"https:\/\/comm.engineering.asu.edu\/pitchfork\/2025\/03\/4-asu-web-standards\/\">4. ASU web standards<\/a><\/p>\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p class=\"mb-2\">Create accessible content with the correct use of headings, color contrast, descriptive alt text and informative links and buttons.<\/p>\n","protected":false},"author":5,"featured_media":815,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[16],"tags":[],"class_list":["post-691","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.3 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>3. Accessibility basics - Pitchfork Theme for WordPress<\/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:\/\/comm.engineering.asu.edu\/pitchfork\/2025\/03\/3-accessibility-basics\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"3. Accessibility basics - Pitchfork Theme for WordPress\" \/>\n<meta property=\"og:description\" content=\"Create accessible content with the correct use of headings, color contrast, descriptive alt text and informative links and buttons.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/comm.engineering.asu.edu\/pitchfork\/2025\/03\/3-accessibility-basics\/\" \/>\n<meta property=\"og:site_name\" content=\"Pitchfork Theme for WordPress\" \/>\n<meta property=\"article:published_time\" content=\"2025-03-13T20:42:39+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-03-21T20:37:52+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2025\/03\/PF-Tutorial-Feature-Image_3.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1920\" \/>\n\t<meta property=\"og:image:height\" content=\"1080\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Kristin Gasser\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2025\/03\/PF-Tutorial-Feature-Image_3.jpg\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Kristin Gasser\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"9 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/comm.engineering.asu.edu\\\/pitchfork\\\/2025\\\/03\\\/3-accessibility-basics\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/comm.engineering.asu.edu\\\/pitchfork\\\/2025\\\/03\\\/3-accessibility-basics\\\/\"},\"author\":{\"name\":\"Kristin Gasser\",\"@id\":\"https:\\\/\\\/comm.engineering.asu.edu\\\/pitchfork\\\/#\\\/schema\\\/person\\\/860a71c1e8d59103fbf39181b9dc1626\"},\"headline\":\"3. Accessibility basics\",\"datePublished\":\"2025-03-13T20:42:39+00:00\",\"dateModified\":\"2025-03-21T20:37:52+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/comm.engineering.asu.edu\\\/pitchfork\\\/2025\\\/03\\\/3-accessibility-basics\\\/\"},\"wordCount\":1431,\"image\":{\"@id\":\"https:\\\/\\\/comm.engineering.asu.edu\\\/pitchfork\\\/2025\\\/03\\\/3-accessibility-basics\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/comm.engineering.asu.edu\\\/pitchfork\\\/wp-content\\\/uploads\\\/sites\\\/79\\\/2025\\\/03\\\/PF-Tutorial-Feature-Image_3.1.jpg\",\"articleSection\":[\"Tutorials\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/comm.engineering.asu.edu\\\/pitchfork\\\/2025\\\/03\\\/3-accessibility-basics\\\/\",\"url\":\"https:\\\/\\\/comm.engineering.asu.edu\\\/pitchfork\\\/2025\\\/03\\\/3-accessibility-basics\\\/\",\"name\":\"3. Accessibility basics - Pitchfork Theme for WordPress\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/comm.engineering.asu.edu\\\/pitchfork\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/comm.engineering.asu.edu\\\/pitchfork\\\/2025\\\/03\\\/3-accessibility-basics\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/comm.engineering.asu.edu\\\/pitchfork\\\/2025\\\/03\\\/3-accessibility-basics\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/comm.engineering.asu.edu\\\/pitchfork\\\/wp-content\\\/uploads\\\/sites\\\/79\\\/2025\\\/03\\\/PF-Tutorial-Feature-Image_3.1.jpg\",\"datePublished\":\"2025-03-13T20:42:39+00:00\",\"dateModified\":\"2025-03-21T20:37:52+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/comm.engineering.asu.edu\\\/pitchfork\\\/#\\\/schema\\\/person\\\/860a71c1e8d59103fbf39181b9dc1626\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/comm.engineering.asu.edu\\\/pitchfork\\\/2025\\\/03\\\/3-accessibility-basics\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/comm.engineering.asu.edu\\\/pitchfork\\\/2025\\\/03\\\/3-accessibility-basics\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/comm.engineering.asu.edu\\\/pitchfork\\\/2025\\\/03\\\/3-accessibility-basics\\\/#primaryimage\",\"url\":\"https:\\\/\\\/comm.engineering.asu.edu\\\/pitchfork\\\/wp-content\\\/uploads\\\/sites\\\/79\\\/2025\\\/03\\\/PF-Tutorial-Feature-Image_3.1.jpg\",\"contentUrl\":\"https:\\\/\\\/comm.engineering.asu.edu\\\/pitchfork\\\/wp-content\\\/uploads\\\/sites\\\/79\\\/2025\\\/03\\\/PF-Tutorial-Feature-Image_3.1.jpg\",\"width\":1920,\"height\":1080,\"caption\":\"Featured image for Pitchfork Tutorial No. 3: Accessibility basics.\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/comm.engineering.asu.edu\\\/pitchfork\\\/2025\\\/03\\\/3-accessibility-basics\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/comm.engineering.asu.edu\\\/pitchfork\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"3. Accessibility basics\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/comm.engineering.asu.edu\\\/pitchfork\\\/#website\",\"url\":\"https:\\\/\\\/comm.engineering.asu.edu\\\/pitchfork\\\/\",\"name\":\"Pitchfork Theme for WordPress\",\"description\":\"an ASU Engineering theme for WordPress\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/comm.engineering.asu.edu\\\/pitchfork\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/comm.engineering.asu.edu\\\/pitchfork\\\/#\\\/schema\\\/person\\\/860a71c1e8d59103fbf39181b9dc1626\",\"name\":\"Kristin Gasser\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/8009ed8222bd96e32afa3d1bc47ec2ab359bedcda2d19602667902f6bb0232e2?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/8009ed8222bd96e32afa3d1bc47ec2ab359bedcda2d19602667902f6bb0232e2?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/8009ed8222bd96e32afa3d1bc47ec2ab359bedcda2d19602667902f6bb0232e2?s=96&d=mm&r=g\",\"caption\":\"Kristin Gasser\"},\"url\":\"https:\\\/\\\/comm.engineering.asu.edu\\\/pitchfork\\\/author\\\/bergeson\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"3. Accessibility basics - Pitchfork Theme for WordPress","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:\/\/comm.engineering.asu.edu\/pitchfork\/2025\/03\/3-accessibility-basics\/","og_locale":"en_US","og_type":"article","og_title":"3. Accessibility basics - Pitchfork Theme for WordPress","og_description":"Create accessible content with the correct use of headings, color contrast, descriptive alt text and informative links and buttons.","og_url":"https:\/\/comm.engineering.asu.edu\/pitchfork\/2025\/03\/3-accessibility-basics\/","og_site_name":"Pitchfork Theme for WordPress","article_published_time":"2025-03-13T20:42:39+00:00","article_modified_time":"2025-03-21T20:37:52+00:00","og_image":[{"width":1920,"height":1080,"url":"https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2025\/03\/PF-Tutorial-Feature-Image_3.jpg","type":"image\/jpeg"}],"author":"Kristin Gasser","twitter_card":"summary_large_image","twitter_image":"https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2025\/03\/PF-Tutorial-Feature-Image_3.jpg","twitter_misc":{"Written by":"Kristin Gasser","Est. reading time":"9 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/comm.engineering.asu.edu\/pitchfork\/2025\/03\/3-accessibility-basics\/#article","isPartOf":{"@id":"https:\/\/comm.engineering.asu.edu\/pitchfork\/2025\/03\/3-accessibility-basics\/"},"author":{"name":"Kristin Gasser","@id":"https:\/\/comm.engineering.asu.edu\/pitchfork\/#\/schema\/person\/860a71c1e8d59103fbf39181b9dc1626"},"headline":"3. Accessibility basics","datePublished":"2025-03-13T20:42:39+00:00","dateModified":"2025-03-21T20:37:52+00:00","mainEntityOfPage":{"@id":"https:\/\/comm.engineering.asu.edu\/pitchfork\/2025\/03\/3-accessibility-basics\/"},"wordCount":1431,"image":{"@id":"https:\/\/comm.engineering.asu.edu\/pitchfork\/2025\/03\/3-accessibility-basics\/#primaryimage"},"thumbnailUrl":"https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2025\/03\/PF-Tutorial-Feature-Image_3.1.jpg","articleSection":["Tutorials"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/comm.engineering.asu.edu\/pitchfork\/2025\/03\/3-accessibility-basics\/","url":"https:\/\/comm.engineering.asu.edu\/pitchfork\/2025\/03\/3-accessibility-basics\/","name":"3. Accessibility basics - Pitchfork Theme for WordPress","isPartOf":{"@id":"https:\/\/comm.engineering.asu.edu\/pitchfork\/#website"},"primaryImageOfPage":{"@id":"https:\/\/comm.engineering.asu.edu\/pitchfork\/2025\/03\/3-accessibility-basics\/#primaryimage"},"image":{"@id":"https:\/\/comm.engineering.asu.edu\/pitchfork\/2025\/03\/3-accessibility-basics\/#primaryimage"},"thumbnailUrl":"https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2025\/03\/PF-Tutorial-Feature-Image_3.1.jpg","datePublished":"2025-03-13T20:42:39+00:00","dateModified":"2025-03-21T20:37:52+00:00","author":{"@id":"https:\/\/comm.engineering.asu.edu\/pitchfork\/#\/schema\/person\/860a71c1e8d59103fbf39181b9dc1626"},"breadcrumb":{"@id":"https:\/\/comm.engineering.asu.edu\/pitchfork\/2025\/03\/3-accessibility-basics\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/comm.engineering.asu.edu\/pitchfork\/2025\/03\/3-accessibility-basics\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/comm.engineering.asu.edu\/pitchfork\/2025\/03\/3-accessibility-basics\/#primaryimage","url":"https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2025\/03\/PF-Tutorial-Feature-Image_3.1.jpg","contentUrl":"https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2025\/03\/PF-Tutorial-Feature-Image_3.1.jpg","width":1920,"height":1080,"caption":"Featured image for Pitchfork Tutorial No. 3: Accessibility basics."},{"@type":"BreadcrumbList","@id":"https:\/\/comm.engineering.asu.edu\/pitchfork\/2025\/03\/3-accessibility-basics\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/comm.engineering.asu.edu\/pitchfork\/"},{"@type":"ListItem","position":2,"name":"3. Accessibility basics"}]},{"@type":"WebSite","@id":"https:\/\/comm.engineering.asu.edu\/pitchfork\/#website","url":"https:\/\/comm.engineering.asu.edu\/pitchfork\/","name":"Pitchfork Theme for WordPress","description":"an ASU Engineering theme for WordPress","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/comm.engineering.asu.edu\/pitchfork\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/comm.engineering.asu.edu\/pitchfork\/#\/schema\/person\/860a71c1e8d59103fbf39181b9dc1626","name":"Kristin Gasser","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/8009ed8222bd96e32afa3d1bc47ec2ab359bedcda2d19602667902f6bb0232e2?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/8009ed8222bd96e32afa3d1bc47ec2ab359bedcda2d19602667902f6bb0232e2?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/8009ed8222bd96e32afa3d1bc47ec2ab359bedcda2d19602667902f6bb0232e2?s=96&d=mm&r=g","caption":"Kristin Gasser"},"url":"https:\/\/comm.engineering.asu.edu\/pitchfork\/author\/bergeson\/"}]}},"_links":{"self":[{"href":"https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-json\/wp\/v2\/posts\/691","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-json\/wp\/v2\/comments?post=691"}],"version-history":[{"count":0,"href":"https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-json\/wp\/v2\/posts\/691\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-json\/wp\/v2\/media\/815"}],"wp:attachment":[{"href":"https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-json\/wp\/v2\/media?parent=691"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-json\/wp\/v2\/categories?post=691"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-json\/wp\/v2\/tags?post=691"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}