[{"data":1,"prerenderedAt":983},["ShallowReactive",2],{"technical-blog-page-content":3,"technical-blog-post-front-end-frameworks-for-accessibility":30,"technical-blog-author-front-end-frameworks-for-accessibility":971},{"id":4,"title":5,"author":6,"blogTags":6,"body":7,"customExcerpt":6,"date":6,"description":11,"excerpt":6,"extension":14,"h1":15,"image":6,"meta":16,"navigation":17,"path":18,"readingStats":19,"seo":24,"stem":28,"__hash__":29},"technicalBlogPage\u002Ftechnical-blog-page.md","Technical Blog Page",null,{"type":8,"value":9,"toc":10},"minimark",[],{"title":11,"searchDepth":12,"depth":12,"links":13},"",2,[],"md","Technical insights, stories and opinions from our team of consultants, analysts, developers and testers.",{},true,"\u002Ftechnical-blog-page",{"text":20,"minutes":21,"time":22,"words":23},"1 min read",0.29,17400,58,{"title":25,"description":26,"keywords":27},"Technology Insights | Audacia Digital Transformation","Technical insights, stories and opinions from leading software development company Audacia's teams of consultants, analysts, developers and testers.","Digital transformation technology, Technology blog, Technology insights, software development blog, software engineering blog","technical-blog-page","XD1gWfEur9Mu64WptQ5pF-e7Ej60LGiq7sRC58wOAeQ",{"id":31,"title":32,"author":33,"blogTags":34,"body":36,"customExcerpt":955,"date":956,"description":41,"excerpt":6,"extension":14,"h1":6,"image":957,"meta":958,"navigation":17,"path":959,"readingStats":960,"seo":965,"stem":969,"__hash__":970},"technicalBlog\u002Ftechnical-blog\u002Ffront-end-frameworks-for-accessibility.md","Front-End Frameworks: Pros & Cons for Accessibility","Tom Shephard",[35],"Web Applications",{"type":8,"value":37,"toc":934},[38,42,45,48,51,70,74,77,82,97,100,218,222,233,236,239,242,245,259,262,403,406,417,420,423,426,429,443,446,668,671,682,685,689,692,696,699,702,714,796,806,825,835,843,861,865,868,894,897,901,904,910,930],[39,40,41],"p",{},"Front-end frameworks like React, Angular, and Vue have become staples of modern web development. By providing reusable components, streamlined DOM manipulation, and simplified state management, frameworks expedite building interactive interfaces.",[39,43,44],{},"However, many popular frameworks originally overlooked a crucial aspect - accessibility. Their abstractions and conventions, while accelerating development, can inadvertently introduce barriers for users with impairments.",[39,46,47],{},"As frameworks evolve, accessibility is being retrofitted into their core components and design paradigms. Still, frameworks pose inherent accessibility trade-offs that teams must address through careful testing and customisation.",[39,49,50],{},"Below we explore three popular frameworks, their accessibility pros and cons, and how teams can maximise their benefits while minimising potential pitfalls, alongside the need for a combined testing approach. We'll cover:",[52,53,54,58,61,64,67],"ol",{},[55,56,57],"li",{},"Angular",[55,59,60],{},"React",[55,62,63],{},"Vue",[55,65,66],{},"Testing",[55,68,69],{},"(TL;DR)",[71,72,57],"h2",{"id":73},"angular",[39,75,76],{},"Angular provides a robust framework for building complex web applications using TypeScript and reactive programming patterns. Given its widespread use, Angular aims to be accessible by default for most scenarios.",[78,79,81],"h3",{"id":80},"accessibility-pros","Accessibility Pros:",[83,84,85,88,91,94],"ul",{},[55,86,87],{},"Provides accessible component blueprints like \u003Cbutton>, \u003Cnavbar> etc.",[55,89,90],{},"Supports ARIA attributes to enhance semantics.",[55,92,93],{},"Detailed accessibility guides covering common UI patterns.",[55,95,96],{},"Integrates testing harness for auditing via Axe, Lighthouse etc.",[39,98,99],{},"For example, Angular's button component handling keyboard accessibility:",[101,102,106],"pre",{"className":103,"code":104,"language":105,"meta":11,"style":11},"language-typescript shiki shiki-themes github-light","@Component({ \u002F\u002F.. })\n\nexport class ButtonComponent {\n    constructor(private elRef: ElementRef\u003CHTMLElement>) {}\n    \n    ngOnInit() {\n        this.elRef.nativeElement.setAttribute('role', 'button');\n    }\n}\n","typescript",[107,108,109,129,134,140,162,168,177,206,212],"code",{"__ignoreMap":11},[110,111,114,118,122,125],"span",{"class":112,"line":113},"line",1,[110,115,117],{"class":116},"sgsFI","@",[110,119,121],{"class":120},"s7eDp","Component",[110,123,124],{"class":116},"({ ",[110,126,128],{"class":127},"sAwPA","\u002F\u002F.. })\n",[110,130,131],{"class":112,"line":12},[110,132,133],{"emptyLinePlaceholder":17},"\n",[110,135,137],{"class":112,"line":136},3,[110,138,139],{"class":116},"export class ButtonComponent {\n",[110,141,143,146,149,153,156,159],{"class":112,"line":142},4,[110,144,145],{"class":120},"    constructor",[110,147,148],{"class":116},"(private elRef: ElementRef",[110,150,152],{"class":151},"sD7c4","\u003C",[110,154,155],{"class":116},"HTMLElement",[110,157,158],{"class":151},">",[110,160,161],{"class":116},") {}\n",[110,163,165],{"class":112,"line":164},5,[110,166,167],{"class":116},"    \n",[110,169,171,174],{"class":112,"line":170},6,[110,172,173],{"class":120},"    ngOnInit",[110,175,176],{"class":116},"() {\n",[110,178,180,184,187,190,193,197,200,203],{"class":112,"line":179},7,[110,181,183],{"class":182},"sYu0t","        this",[110,185,186],{"class":116},".elRef.nativeElement.",[110,188,189],{"class":120},"setAttribute",[110,191,192],{"class":116},"(",[110,194,196],{"class":195},"sYBdl","'role'",[110,198,199],{"class":116},", ",[110,201,202],{"class":195},"'button'",[110,204,205],{"class":116},");\n",[110,207,209],{"class":112,"line":208},8,[110,210,211],{"class":116},"    }\n",[110,213,215],{"class":112,"line":214},9,[110,216,217],{"class":116},"}\n",[78,219,221],{"id":220},"accessibility-cons","Accessibility Cons:",[83,223,224,227,230],{},[55,225,226],{},"Accessibility not enforced; still possible to build inaccessible UIs.",[55,228,229],{},"Complex interfaces with custom components require rigorous testing.",[55,231,232],{},"Heavy DOM manipulation can interfere with screen readers without proper handling.",[39,234,235],{},"Teams using Angular can leverage its accessible foundations but must vigilantly confirm that custom implementations also deliver inclusive experiences.",[71,237,60],{"id":238},"react",[39,240,241],{},"React's composable components and Virtual DOM make it a top choice for responsive UIs. React provides several APIs and techniques for web accessibility:",[78,243,81],{"id":244},"accessibility-pros-1",[83,246,247,250,253,256],{},[55,248,249],{},"Complete keyboard navigation\u002Ffocus management.",[55,251,252],{},"Built-in ARIA semantics for common components.",[55,254,255],{},"APIs like useRef() to integrate with assistive technologies.",[55,257,258],{},"Wide ecosystem of accessibility testing tools.",[39,260,261],{},"For example, React's button component handling keyboard accessibility:",[101,263,265],{"className":103,"code":264,"language":105,"meta":11,"style":11},"function Button(props) {\n    return (\n        \u003Cbutton\n            role=\"button\"\n            onKeyDown={handleKeyDown}\n            {...props}\n        \u002F>\n    );\n}\n\nfunction handleKeyDown(event) {\n    if (event.key === 'Enter') {\n        onClick();\n    }\n}\n",[107,266,267,284,292,300,311,321,333,338,343,347,352,367,384,393,398],{"__ignoreMap":11},[110,268,269,272,275,277,281],{"class":112,"line":113},[110,270,271],{"class":151},"function",[110,273,274],{"class":120}," Button",[110,276,192],{"class":116},[110,278,280],{"class":279},"sqxcx","props",[110,282,283],{"class":116},") {\n",[110,285,286,289],{"class":112,"line":12},[110,287,288],{"class":151},"    return",[110,290,291],{"class":116}," (\n",[110,293,294,297],{"class":112,"line":136},[110,295,296],{"class":151},"        \u003C",[110,298,299],{"class":279},"button\n",[110,301,302,305,308],{"class":112,"line":142},[110,303,304],{"class":116},"            role",[110,306,307],{"class":151},"=",[110,309,310],{"class":195},"\"button\"\n",[110,312,313,316,318],{"class":112,"line":164},[110,314,315],{"class":116},"            onKeyDown",[110,317,307],{"class":151},[110,319,320],{"class":116},"{handleKeyDown}\n",[110,322,323,326,329,331],{"class":112,"line":170},[110,324,325],{"class":116},"            {",[110,327,328],{"class":151},"...",[110,330,280],{"class":279},[110,332,217],{"class":116},[110,334,335],{"class":112,"line":179},[110,336,337],{"class":151},"        \u002F>\n",[110,339,340],{"class":112,"line":208},[110,341,342],{"class":116},"    );\n",[110,344,345],{"class":112,"line":214},[110,346,217],{"class":116},[110,348,350],{"class":112,"line":349},10,[110,351,133],{"emptyLinePlaceholder":17},[110,353,355,357,360,362,365],{"class":112,"line":354},11,[110,356,271],{"class":151},[110,358,359],{"class":120}," handleKeyDown",[110,361,192],{"class":116},[110,363,364],{"class":279},"event",[110,366,283],{"class":116},[110,368,370,373,376,379,382],{"class":112,"line":369},12,[110,371,372],{"class":151},"    if",[110,374,375],{"class":116}," (event.key ",[110,377,378],{"class":151},"===",[110,380,381],{"class":195}," 'Enter'",[110,383,283],{"class":116},[110,385,387,390],{"class":112,"line":386},13,[110,388,389],{"class":120},"        onClick",[110,391,392],{"class":116},"();\n",[110,394,396],{"class":112,"line":395},14,[110,397,211],{"class":116},[110,399,401],{"class":112,"line":400},15,[110,402,217],{"class":116},[78,404,221],{"id":405},"accessibility-cons-1",[83,407,408,411,414],{},[55,409,410],{},"Accessibility not enforced by default; must be explicitly implemented.",[55,412,413],{},"Complex custom components need thorough evaluation.",[55,415,416],{},"Frequent DOM updates can impact screen reader performance.",[39,418,419],{},"Like Angular, React provides helpful APIs for accessibility but puts the onus on developers to apply them appropriately. Testing custom interfaces remains critical.",[71,421,63],{"id":422},"vue",[39,424,425],{},"Vue provides a lightweight framework for building web interfaces with HTML, CSS and JavaScript.",[78,427,81],{"id":428},"accessibility-pros-2",[83,430,431,434,437,440],{},[55,432,433],{},"Strong focus on semantic HTML in documentation.",[55,435,436],{},"Component DevTools debugger helps spot accessibility issues.",[55,438,439],{},"Integrates ARIA roles and attributes in built-in components.",[55,441,442],{},"Vue Face API provides facial tracking for assistive tech.",[39,444,445],{},"For example, Vue's button component handling keyboard accessibility:",[101,447,449],{"className":103,"code":448,"language":105,"meta":11,"style":11},"\u003Ctemplate>\n    \u003Cbutton\n        v-bind=\"$attrs\"\n        v-on=\"$listeners\"\n        ref=\"button\"\n        @keydown=\"onKeyDown\"\n    >\u003C\u002Fbutton>\n\u003C\u002Ftemplate>\n\n\u003Cscript setup lang=\"ts\">\nconst emit = defineEmits\u003C{ (event: 'click'): void} >();\n\nconst onKeyDown = (event: Event) => {\n    if (event.key === 'Enter') {\n        emit('click');\n    }\n}\n\u003C\u002Fscript>\n",[107,450,451,461,468,484,498,507,517,530,538,542,556,592,596,624,636,648,653,658],{"__ignoreMap":11},[110,452,453,455,458],{"class":112,"line":113},[110,454,152],{"class":116},[110,456,457],{"class":120},"template",[110,459,460],{"class":116},">\n",[110,462,463,466],{"class":112,"line":12},[110,464,465],{"class":151},"    \u003C",[110,467,299],{"class":116},[110,469,470,473,476,479,481],{"class":112,"line":136},[110,471,472],{"class":116},"        v",[110,474,475],{"class":151},"-",[110,477,478],{"class":116},"bind",[110,480,307],{"class":151},[110,482,483],{"class":195},"\"$attrs\"\n",[110,485,486,488,490,493,495],{"class":112,"line":142},[110,487,472],{"class":116},[110,489,475],{"class":151},[110,491,492],{"class":116},"on",[110,494,307],{"class":151},[110,496,497],{"class":195},"\"$listeners\"\n",[110,499,500,503,505],{"class":112,"line":164},[110,501,502],{"class":116},"        ref",[110,504,307],{"class":151},[110,506,310],{"class":195},[110,508,509,512,514],{"class":112,"line":170},[110,510,511],{"class":116},"        @keydown",[110,513,307],{"class":151},[110,515,516],{"class":195},"\"onKeyDown\"\n",[110,518,519,522,525,528],{"class":112,"line":179},[110,520,521],{"class":151},"    >",[110,523,524],{"class":116},"\u003C\u002F",[110,526,527],{"class":120},"button",[110,529,460],{"class":116},[110,531,532,534,536],{"class":112,"line":208},[110,533,524],{"class":151},[110,535,457],{"class":116},[110,537,460],{"class":151},[110,539,540],{"class":112,"line":214},[110,541,133],{"emptyLinePlaceholder":17},[110,543,544,546,549,551,554],{"class":112,"line":349},[110,545,152],{"class":151},[110,547,548],{"class":116},"script setup lang",[110,550,307],{"class":151},[110,552,553],{"class":195},"\"ts\"",[110,555,460],{"class":151},[110,557,558,561,564,567,570,573,575,578,581,584,586,589],{"class":112,"line":354},[110,559,560],{"class":151},"const",[110,562,563],{"class":182}," emit",[110,565,566],{"class":151}," =",[110,568,569],{"class":120}," defineEmits",[110,571,572],{"class":116},"\u003C{ (",[110,574,364],{"class":279},[110,576,577],{"class":151},":",[110,579,580],{"class":195}," 'click'",[110,582,583],{"class":116},")",[110,585,577],{"class":151},[110,587,588],{"class":182}," void",[110,590,591],{"class":116},"} >();\n",[110,593,594],{"class":112,"line":369},[110,595,133],{"emptyLinePlaceholder":17},[110,597,598,600,603,605,608,610,612,615,618,621],{"class":112,"line":386},[110,599,560],{"class":151},[110,601,602],{"class":120}," onKeyDown",[110,604,566],{"class":151},[110,606,607],{"class":116}," (",[110,609,364],{"class":279},[110,611,577],{"class":151},[110,613,614],{"class":120}," Event",[110,616,617],{"class":116},") ",[110,619,620],{"class":151},"=>",[110,622,623],{"class":116}," {\n",[110,625,626,628,630,632,634],{"class":112,"line":395},[110,627,372],{"class":151},[110,629,375],{"class":116},[110,631,378],{"class":151},[110,633,381],{"class":195},[110,635,283],{"class":116},[110,637,638,641,643,646],{"class":112,"line":400},[110,639,640],{"class":120},"        emit",[110,642,192],{"class":116},[110,644,645],{"class":195},"'click'",[110,647,205],{"class":116},[110,649,651],{"class":112,"line":650},16,[110,652,211],{"class":116},[110,654,656],{"class":112,"line":655},17,[110,657,217],{"class":116},[110,659,661,663,666],{"class":112,"line":660},18,[110,662,524],{"class":151},[110,664,665],{"class":116},"script",[110,667,460],{"class":151},[78,669,221],{"id":670},"accessibility-cons-2",[83,672,673,676,679],{},[55,674,675],{},"Limited built-in validation of accessibility issues.",[55,677,678],{},"Accessibility must be custom-implemented in templates and components.",[55,680,681],{},"Complex interfaces need extensive assistive tech testing.",[39,683,684],{},"Vue promotes semantic HTML practices but developers must proactively confirm accessibility in implementations.",[71,686,688],{"id":687},"maximising-frameworks-via-testing","Maximising Frameworks via Testing",[39,690,691],{},"Modern frameworks provide tools to build accessible interfaces, but barriers can emerge in custom components, complex UIs, and dynamic experiences. Therefore, comprehensive testing is key across two dimensions: automated testing and manual testing.",[78,693,695],{"id":694},"automated-testing","Automated Testing",[39,697,698],{},"Automated testing leverages programmatic scans to catch compliance issues and violations. Running frequently, automation provides rapid feedback on regressions across code changes.",[39,700,701],{},"Useful technologies include:",[83,703,704],{},[55,705,706,710,713],{},[707,708,709],"strong",{},"Unit Testing:",[711,712],"br",{},"Validate individual components contain proper semantics and behaviours using frameworks like Jest and React Testing Library.",[101,715,717],{"className":103,"code":716,"language":105,"meta":11,"style":11},"test('renders button with role attribute', () => {\n    render(\n        \u003CButton>Test\u003C\u002FButton>\n    );\n    \n    expect(screen.getByRole('button')).toBeInTheDocument();\n});\n",[107,718,719,736,744,760,764,768,791],{"__ignoreMap":11},[110,720,721,724,726,729,732,734],{"class":112,"line":113},[110,722,723],{"class":120},"test",[110,725,192],{"class":116},[110,727,728],{"class":195},"'renders button with role attribute'",[110,730,731],{"class":116},", () ",[110,733,620],{"class":151},[110,735,623],{"class":116},[110,737,738,741],{"class":112,"line":12},[110,739,740],{"class":120},"    render",[110,742,743],{"class":116},"(\n",[110,745,746,748,751,754,756,758],{"class":112,"line":136},[110,747,296],{"class":116},[110,749,750],{"class":120},"Button",[110,752,753],{"class":116},">Test",[110,755,524],{"class":151},[110,757,750],{"class":116},[110,759,460],{"class":151},[110,761,762],{"class":112,"line":142},[110,763,342],{"class":116},[110,765,766],{"class":112,"line":164},[110,767,167],{"class":116},[110,769,770,773,776,779,781,783,786,789],{"class":112,"line":170},[110,771,772],{"class":120},"    expect",[110,774,775],{"class":116},"(screen.",[110,777,778],{"class":120},"getByRole",[110,780,192],{"class":116},[110,782,202],{"class":195},[110,784,785],{"class":116},")).",[110,787,788],{"class":120},"toBeInTheDocument",[110,790,392],{"class":116},[110,792,793],{"class":112,"line":179},[110,794,795],{"class":116},"});\n",[83,797,798],{},[55,799,800,803,805],{},[707,801,802],{},"Linting:",[711,804],{},"Scan components for issues via ESLint plugins and IDE extensions.",[101,807,809],{"className":103,"code":808,"language":105,"meta":11,"style":11},"\"plugins\": [ \"eslint-plugin-jsx-a11y\" ]\n",[107,810,811],{"__ignoreMap":11},[110,812,813,816,819,822],{"class":112,"line":113},[110,814,815],{"class":195},"\"plugins\"",[110,817,818],{"class":116},": [ ",[110,820,821],{"class":195},"\"eslint-plugin-jsx-a11y\"",[110,823,824],{"class":116}," ]\n",[83,826,827],{},[55,828,829,832,834],{},[707,830,831],{},"Command line:",[711,833],{},"Tools like pa11y, Axe Core CLI, and Lighthouse CLI to audit pages and generate reports.",[101,836,841],{"className":837,"code":839,"language":840},[838],"language-text","pa11y --reporter json https:\u002F\u002Fexample.com > report.json\n","text",[107,842,839],{"__ignoreMap":11},[83,844,845,853],{},[55,846,847,850,852],{},[707,848,849],{},"CI\u002FCD:",[711,851],{},"Integrate scans into build pipelines to fail builds on regressions.",[55,854,855,858,860],{},[707,856,857],{},"UI Automation:",[711,859],{},"End-to-end testing tools like Cypress and Playwright can integrate accessibility checks into UI automation flows. Cypress offers the cypress-axe plugin, while Playwright has the playwright-a11y package.",[78,862,864],{"id":863},"manual-testing","Manual Testing",[39,866,867],{},"Automated testing alone cannot catch all subtle user experience barriers. Manual testing is essential for authentic evaluation from real users' perspectives. Useful techniques include:",[83,869,870,878,886],{},[55,871,872,875,877],{},[707,873,874],{},"Internal User Testing:",[711,876],{},"Team members use keyboards, magnifiers, screen readers to replicate impaired experiences.",[55,879,880,883,885],{},[707,881,882],{},"External User Testing:",[711,884],{},"Get direct feedback from users through task-based testing.",[55,887,888,891,893],{},[707,889,890],{},"Cross-browser Testing:",[711,892],{},"Ensure consistency across different browsers, devices and platforms.",[39,895,896],{},"With rigorous testing and user feedback, organisations can maximise frameworks' convenience while ensuring they don't compromise on inclusivity and access. Planning for accessibility from the start, rather than retrofitting later, is key for modern web development.",[71,898,900],{"id":899},"tldr","TL;DR",[39,902,903],{},"Front-end frameworks offer immense convenience for web development, but can also introduce accessibility pitfalls.",[78,905,907],{"id":906},"key-takeaways",[707,908,909],{},"Key takeaways:",[83,911,912,915,918,921,924,927],{},[55,913,914],{},"Frameworks have become increasingly more accessibility friendly, but more work remains. Whilst much of their inbuilt functionality is now accessible, it is still essential to test these thoroughly particularly when customising their implementation.",[55,916,917],{},"Automated testing is invaluable, but robust manual testing with assistive technologies is essential.",[55,919,920],{},"Custom components and complex UIs require the most scrutiny. Engage users early and often.",[55,922,923],{},"Semantic HTML, thoughtful ARIA usage, and controlled DOM updates are key across frameworks.",[55,925,926],{},"Accessibility must be woven throughout development, not tacked on at the end. Changing culture is crucial.",[55,928,929],{},"With planning, testing, and shared ownership, organisations can maximise frameworks’ benefits while delivering inclusive experiences.",[931,932,933],"style",{},"html pre.shiki code .sgsFI, html code.shiki .sgsFI{--shiki-default:#24292E}html pre.shiki code .s7eDp, html code.shiki .s7eDp{--shiki-default:#6F42C1}html pre.shiki code .sAwPA, html code.shiki .sAwPA{--shiki-default:#6A737D}html pre.shiki code .sD7c4, html code.shiki .sD7c4{--shiki-default:#D73A49}html pre.shiki code .sYu0t, html code.shiki .sYu0t{--shiki-default:#005CC5}html pre.shiki code .sYBdl, html code.shiki .sYBdl{--shiki-default:#032F62}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html pre.shiki code .sqxcx, html code.shiki .sqxcx{--shiki-default:#E36209}",{"title":11,"searchDepth":12,"depth":12,"links":935},[936,940,944,948,952],{"id":73,"depth":12,"text":57,"children":937},[938,939],{"id":80,"depth":136,"text":81},{"id":220,"depth":136,"text":221},{"id":238,"depth":12,"text":60,"children":941},[942,943],{"id":244,"depth":136,"text":81},{"id":405,"depth":136,"text":221},{"id":422,"depth":12,"text":63,"children":945},[946,947],{"id":428,"depth":136,"text":81},{"id":670,"depth":136,"text":221},{"id":687,"depth":12,"text":688,"children":949},[950,951],{"id":694,"depth":136,"text":695},{"id":863,"depth":136,"text":864},{"id":899,"depth":12,"text":900,"children":953},[954],{"id":906,"depth":136,"text":909},"While front-end frameworks like React, Angular, and Vue accelerate web development, they can also introduce accessibility pitfalls. This article explores three popular frameworks' accessibility pros and cons, along with testing best practices.","2023-10-31T13:39:57.384Z","\u002Fimg\u002Ftechnical-blog\u002Ffront-end-frameworks-for-accessibility.png",{},"\u002Ftechnical-blog\u002Ffront-end-frameworks-for-accessibility",{"text":961,"minutes":962,"time":963,"words":964},"6 min read",5.32,319200,1064,{"title":966,"description":967,"keywords":968},"Front-End Frameworks: Pros & Cons for Accessibility | Audacia","Software development company, Audacia, discusses three popular frameworks' accessibility pros and cons, along with testing best practices.","web applications accessibility, web application development, accessible software development","technical-blog\u002Ffront-end-frameworks-for-accessibility","LA882zBbzt4K4526tq7a_Pw73gx3Sv2vEt0OKCNZ_6E",{"id":972,"title":33,"bio":973,"extension":14,"image":974,"meta":975,"stem":981,"__hash__":982},"author\u002Fauthors\u002Ftom-shephard.md","Tom is a Senior Software Engineer at Audacia. Tom joined Audacia through the 2021 Academy programme to begin a career in technology and has since worked on a number of different projects. Tom is passionate about accessibility and helped draft Audacia's company-wide accessible web development standards.","\u002Fimg\u002Fauthors\u002Ftomshephard_headshot.jpg",{"path":976,"description":11,"body":977},"\u002Fauthors\u002Ftom-shephard",{"type":8,"value":978,"toc":979},[],{"title":11,"searchDepth":12,"depth":12,"links":980},[],"authors\u002Ftom-shephard","XIjcnNywNQPg-BUNqbEgrMiwFzeevpcLc6MvlvngUz8",1778145943185]