ONA Weekly #355: Simple Tips For Making Your Website More Accessible

By on April 14, 2021

body,#bodyTable,#bodyCell{ height:100% !important; margin:0; padding:0; width:100% !important; } table{ border-collapse:collapse; } img,a img{ border:0; outline:none; text-decoration:none; } h1,h2,h3,h4,h5,h6{ margin:0; padding:0; } p{ margin:1em 0; padding:0; } a{ word-wrap:break-word; } .mcnPreviewText{ display:none !important; } .ReadMsgBody{ width:100%; } .ExternalClass{ width:100%; } .ExternalClass,.ExternalClass p,.ExternalClass span,.ExternalClass font,.ExternalClass td,.ExternalClass div{ line-height:100%; } table,td{ mso-table-lspace:0pt; mso-table-rspace:0pt; } #outlook a{ padding:0; } img{ -ms-interpolation-mode:bicubic; } body,table,td,p,a,li,blockquote{ -ms-text-size-adjust:100%; -webkit-text-size-adjust:100%; } #templatePreheader,#templateHeader,#templateBody,#templateFooter{ min-width:100%; } #bodyCell{ padding:20px; } .mcnImage,.mcnRetinaImage{ vertical-align:bottom; } .mcnTextContent img{ height:auto !important; } body,#bodyTable{ background-color:#ffffff; } #bodyCell{ border-top:0; } #templateContainer{ border:0; } h1{ color:#000000 !important; display:block; font-family:Helvetica; font-size:26px; font-style:normal; font-weight:normal; line-height:200%; letter-spacing:normal; margin:0; text-align:left; } h2{ color:#000000 !important; display:block; font-family:Helvetica; font-size:20px; font-style:normal; font-weight:normal; line-height:200%; letter-spacing:normal; margin:0; text-align:left; } h3{ color:#000000 !important; display:block; font-family:Helvetica; font-size:18px; font-style:normal; font-weight:normal; line-height:200%; letter-spacing:normal; margin:0; text-align:left; } h4{ color:#000000 !important; display:block; font-family:Helvetica; font-size:16px; font-style:normal; font-weight:normal; line-height:200%; letter-spacing:normal; margin:0; text-align:left; } #templatePreheader{ background-color:#ffffff; border-top:0; border-bottom:0; } .preheaderContainer .mcnTextContent,.preheaderContainer .mcnTextContent p{ color:#606060; font-family:Helvetica; font-size:11px; line-height:125%; text-align:left; } .preheaderContainer .mcnTextContent a{ color:#606060; font-weight:normal; text-decoration:underline; } #templateHeader{ background-color:#ffffff; border-top:0; border-bottom:0; } .headerContainer .mcnTextContent,.headerContainer .mcnTextContent p{ color:#213563; font-family:Helvetica; font-size:15px; line-height:150%; text-align:left; } .headerContainer .mcnTextContent a{ color:#6DC6DD; font-weight:normal; text-decoration:underline; } #templateBody{ background-color:#ffffff; border-top:0; border-bottom:0; } .bodyContainer .mcnTextContent,.bodyContainer .mcnTextContent p{ color:#666666; font-family:Arial, ‘Helvetica Neue’, Helvetica, sans-serif; font-size:14px; line-height:200%; text-align:left; } .bodyContainer .mcnTextContent a{ color:#2ab7ca; font-weight:normal; text-decoration:underline; } #templateFooter{ background-color:#ffffff; border-top:1px dotted #999999; border-bottom:0; } .footerContainer .mcnTextContent,.footerContainer .mcnTextContent p{ color:#606060; font-family:Helvetica; font-size:11px; line-height:125%; text-align:left; } .footerContainer .mcnTextContent a{ color:#606060; font-weight:normal; text-decoration:underline; } @media only screen and (max-width: 480px){ body,table,td,p,a,li,blockquote{ -webkit-text-size-adjust:none !important; } } @media only screen and (max-width: 480px){ body{ width:100% !important; min-width:100% !important; } } @media only screen and (max-width: 480px){ .mcnRetinaImage{ max-width:100% !important; } } @media only screen and (max-width: 480px){ td[id=bodyCell]{ padding:10px !important; } } @media only screen and (max-width: 480px){ table[class=mcnTextContentContainer]{ width:100% !important; } } @media only screen and (max-width: 480px){ .mcnBoxedTextContentContainer{ max-width:100% !important; min-width:100% !important; width:100% !important; } } @media only screen and (max-width: 480px){ table[class=mcpreview-image-uploader]{ width:100% !important; display:none !important; } } @media only screen and (max-width: 480px){ img[class=mcnImage]{ width:100% !important; } } @media only screen and (max-width: 480px){ table[class=mcnImageGroupContentContainer]{ width:100% !important; } } @media only screen and (max-width: 480px){ td[class=mcnImageGroupContent]{ padding:9px !important; } } @media only screen and (max-width: 480px){ td[class=mcnImageGroupBlockInner]{ padding-bottom:0 !important; padding-top:0 !important; } } @media only screen and (max-width: 480px){ tbody[class=mcnImageGroupBlockOuter]{ padding-bottom:9px !important; padding-top:9px !important; } } @media only screen and (max-width: 480px){ table[class=mcnCaptionTopContent],table[class=mcnCaptionBottomContent]{ width:100% !important; } } @media only screen and (max-width: 480px){ table[class=mcnCaptionLeftTextContentContainer],table[class=mcnCaptionRightTextContentContainer],table[class=mcnCaptionLeftImageContentContainer],table[class=mcnCaptionRightImageContentContainer],table[class=mcnImageCardLeftTextContentContainer],table[class=mcnImageCardRightTextContentContainer],.mcnImageCardLeftImageContentContainer,.mcnImageCardRightImageContentContainer{ width:100% !important; } } @media only screen and (max-width: 480px){ td[class=mcnImageCardLeftImageContent],td[class=mcnImageCardRightImageContent]{ padding-right:18px !important; padding-left:18px !important; padding-bottom:0 !important; } } @media only screen and (max-width: 480px){ td[class=mcnImageCardBottomImageContent]{ padding-bottom:9px !important; } } @media only screen and (max-width: 480px){ td[class=mcnImageCardTopImageContent]{ padding-top:18px !important; } } @media only screen and (max-width: 480px){ td[class=mcnImageCardLeftImageContent],td[class=mcnImageCardRightImageContent]{ padding-right:18px !important; padding-left:18px !important; padding-bottom:0 !important; } } @media only screen and (max-width: 480px){ td[class=mcnImageCardBottomImageContent]{ padding-bottom:9px !important; } } @media only screen and (max-width: 480px){ td[class=mcnImageCardTopImageContent]{ padding-top:18px !important; } } @media only screen and (max-width: 480px){ table[class=mcnCaptionLeftContentOuter] td[class=mcnTextContent],table[class=mcnCaptionRightContentOuter] td[class=mcnTextContent]{ padding-top:9px !important; } } @media only screen and (max-width: 480px){ td[class=mcnCaptionBlockInner] table[class=mcnCaptionTopContent]:last-child td[class=mcnTextContent],.mcnImageCardTopImageContent,.mcnCaptionBottomContent:last-child .mcnCaptionBottomImageContent{ padding-top:18px !important; } } @media only screen and (max-width: 480px){ td[class=mcnBoxedTextContentColumn]{ padding-left:18px !important; padding-right:18px !important; } } @media only screen and (max-width: 480px){ td[class=mcnTextContent]{ padding-right:18px !important; padding-left:18px !important; } } @media only screen and (max-width: 480px){ table[id=templateContainer],table[id=templatePreheader],table[id=templateHeader],table[id=templateBody],table[id=templateFooter]{ max-width:600px !important; width:100% !important; } } @media only screen and (max-width: 480px){ h1{ font-size:20px !important; line-height:200% !important; } } @media only screen and (max-width: 480px){ h2{ font-size:18px !important; line-height:200% !important; } } @media only screen and (max-width: 480px){ h3{ font-size:16px !important; line-height:200% !important; } } @media only screen and (max-width: 480px){ h4{ font-size:14px !important; line-height:200% !important; } } @media only screen and (max-width: 480px){ table[class=mcnBoxedTextContentContainer] td[class=mcnTextContent],td[class=mcnBoxedTextContentContainer] td[class=mcnTextContent] p{ font-size:18px !important; line-height:125% !important; } } @media only screen and (max-width: 480px){ table[id=templatePreheader]{ display:block !important; } } @media only screen and (max-width: 480px){ td[class=preheaderContainer] td[class=mcnTextContent],td[class=preheaderContainer] td[class=mcnTextContent] p{ font-size:14px !important; line-height:115% !important; } } @media only screen and (max-width: 480px){ td[class=headerContainer] td[class=mcnTextContent],td[class=headerContainer] td[class=mcnTextContent] p{ font-size:14px !important; line-height:125% !important; } } @media only screen and (max-width: 480px){ td[class=bodyContainer] td[class=mcnTextContent],td[class=bodyContainer] td[class=mcnTextContent] p{ font-size:12px !important; line-height:200% !important; } } @media only screen and (max-width: 480px){ td[class=footerContainer] td[class=mcnTextContent],td[class=footerContainer] td[class=mcnTextContent] p{ font-size:10px !important; line-height:115% !important; } } @media only screen and (max-width: 480px){ td[class=footerContainer] a[class=utilityLink]{ display:block !important; } }
ONA21 is happening virtually June 22-25. Learn why it’s the can’t-miss event for digital journalism leaders and innovators around the world.
<!–

–>
Lightbulb on a string

Simple ways to make your website more accessible

Many people think of accessibility in terms of physical space, like handrails and wheelchair ramps. But accessibility is relevant to online spaces as well. And online accessibility benefits everyone—it doesn’t just help someone who might be disabled, it helps all kinds of people access the news in many ways. It can help the business itself. For example, adding semantic markup around content, which aids those using screen readers, also helps the algorithms that process and rank content for search engines. 

In “Accessibility Thinking for Publishers,” Kevin Fodness and Christina Deemer offer concrete ways of improving accessibility with minimal use of code. Their suggestions include:

  • Practice inclusivity from the kick-off — for instance, think about colors (high contrast is best) from the beginning
  • Do user testing with a diverse audience
  • Run a site audit using axe or Google Lighthouse to test for the biggest issues
  • Validate your site’s HTML
  • Remember to write alt text for contextual images 
  • Use hierarchical headings
  • When linking, describe the content instead of writing “click here”

Dig deeper: Accessibility Thinking for Publishers (2019) — 45-minute webinar
Featured experts: Kevin Fodness, Christina Deemer
Try this, too: 

We’re always on the lookout for helpful resources and tips. If you have other examples to share, please reply directly to this email.

<!–

–>

Last call to submit your ONA21 session idea

Suggestions for ONA21 sessions are due tomorrow (April 15) by 9 p.m. Eastern! We’ve shared tips and format ideas, all that’s left to do now is submit.

For those who have already submitted, here’s what will happen next. A diverse volunteer group will review every single idea and then come up with a shortlist. Next, ONA staff go through the shortlist and start approving sessions, sometimes combining a couple ideas. Beginning in May, we notify everyone about the status of their pitch and, for accepted sessions, start confirming speaker availability. The schedule will be nearly complete by early June!

<!–

–>

Advertisement

Power Shift Project’s Workplace Integrity Training

The Freedom Forum’s Power Shift Project has updated its Workplace Integrity curriculum with new content to be delivered online. The goal is to produce workplaces free of harassment, discrimination and incivility, especially for those who have traditionally been vulnerable. Sign up for the training.

<!–

–>

Stat of the week

According to Pew Research, 71% of adult Twitter users in the U.S. get news on the site. Despite the buzz around newer apps like Clubhouse and TikTok, it seems unlikely that Twitter is going away anytime soon. It can be a powerful tool for reporting and dissemination, as shown by ONA’s talks on lessons from Black Twitter and targeting social media messages across different channels.

<!–

–>

Important dates

Note: All ONA events are currently happening online, and open to all regardless of where you’re located.

<!–

–>

Career opportunities

ONA’s Career Center is an excellent resource for jobs, fellowships and internships in digital journalism. Recent postings include:

<!–

–>

On our radar

<!–

–>
IMAGE CREDIT: Photo by Luis Tosta on Unsplash
Join as an ONA member or make a donation to help sustain ONA’s mission to inspire and support innovation in digital journalism. If you’re looking to promote an event, product, job opening or other opportunity, explore options to reach the ONA community.

We also rely on philanthropic and corporate support. Contact Chief Strategic Partnerships Officer Jessica Strelitz at jessica@journalists.org to learn about the many ways to invest in our mission.