[{"data":1,"prerenderedAt":5095},["Reactive",2],{"content-query-eu8nNwF0Mg":3,"content-query-sRcAOLyBfI":939,"content-query-2Uk9b8M0IH":1649,"content-query-8skL7bgdPZ":2662},[4],{"_path":5,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":9,"description":10,"author":11,"date":12,"readingTime":13,"level":14,"image":15,"tags":16,"slugs":22,"relatedArticles":25,"body":29,"_type":934,"_id":935,"_source":936,"_file":937,"_extension":938},"/knowledge/what-are-spa-ssr-pwa-and-what-are-the-benefits-and-disadvantages","knowledge",false,"","What are SPA, SSR, PWA and what are the advantages or disadvantages?","A little bit of historical development of websites to today. Explanation of the terms Single Page Application, Server Side Rendering, Progressive web appgres, differences between them and advantages/disadvantages.","Standa Horvath","2023-07-05",16,"beginner","/featured/SPA-SSR-PWA.jpg",[17,18,19,20,21],"spa","ssr","pwa","html","history",{"en":23,"cs":24},"what-are-spa-ssr-pwa-and-what-are-the-benefits-and-disadvantages","co-jsou-spa-ssr-pwa-a-jake-jsou-vyhody-ci-nevyhody",[26,27,28],"tailwind-introduction","local-wordpress-development-harness-the-power-of-docker-containers","ai-assisted-web-application-development",{"type":30,"children":31,"toc":918},"root",[32,40,47,68,74,119,131,206,216,222,262,315,324,330,396,404,412,476,494,500,552,571,579,584,610,618,623,650,655,694,706,711,728,740,773,780,806,814,819,825,849,855],{"type":33,"tag":34,"props":35,"children":37},"element","h1",{"id":36},"what-are-spa-ssr-pwa-and-what-are-the-advantages-or-disadvantages",[38],{"type":39,"value":9},"text",{"type":33,"tag":41,"props":42,"children":44},"h2",{"id":43},"introduction",[45],{"type":39,"value":46},"Introduction",{"type":33,"tag":48,"props":49,"children":50},"p",{},[51,53,59,61,66],{"type":39,"value":52},"The aim of this article is to ",{"type":33,"tag":54,"props":55,"children":56},"strong",{},[57],{"type":39,"value":58},"outline the terms SPA, SSR, PWA",{"type":39,"value":60},", their advantages, disadvantages and differences. First, we will look at the history of the web, discuss how the internet came to be and how it has evolved to understand why technology is moving in this direction. We'll take a bite of modern frameworks and use examples to introduce the aforementioned acronyms. This article is intended for anyone interested in modern web technologies, and is intended to introduce the topic and ",{"type":33,"tag":54,"props":62,"children":63},{},[64],{"type":39,"value":65},"motivate the reader to continue further study",{"type":39,"value":67}," of this exciting subject.",{"type":33,"tag":41,"props":69,"children":71},{"id":70},"first-websites",[72],{"type":39,"value":73},"First websites",{"type":33,"tag":48,"props":75,"children":76},{},[77,79,84,86,91,93,98,100,110,112,117],{"type":39,"value":78},"To get to the explanation of the terms in the title of this article, we must first get to the roots of the origins of the ",{"type":33,"tag":54,"props":80,"children":81},{},[82],{"type":39,"value":83},"Internet itself (WorldWideWeb)",{"type":39,"value":85},". It began when British scientist ",{"type":33,"tag":54,"props":87,"children":88},{},[89],{"type":39,"value":90},"Sir Tim Berners-Lee",{"type":39,"value":92}," solved the problem of how to share information in a structured form between scientists at ",{"type":33,"tag":54,"props":94,"children":95},{},[96],{"type":39,"value":97},"CERN",{"type":39,"value":99},". In 1989, he came up with a proposal which he called \"",{"type":33,"tag":101,"props":102,"children":107},"a",{"href":103,"rel":104,":target":106},"https://cds.cern.ch/record/369245/files/dd-89-001.pdf",[105],"nofollow","_blank",[108],{"type":39,"value":109},"Information Management: A Proposal",{"type":39,"value":111},"\"\r\nThis idea did not meet with much success, Tim's boss (Mike Sendall) called the proposal ",{"type":33,"tag":54,"props":113,"children":114},{},[115],{"type":39,"value":116},"vague",{"type":39,"value":118}," and the project was never an official CERN project.",{"type":33,"tag":48,"props":120,"children":121},{},[122,124,129],{"type":39,"value":123},"In 1990 Tim wrote the basic ",{"type":33,"tag":54,"props":125,"children":126},{},[127],{"type":39,"value":128},"three building blocks of the web",{"type":39,"value":130},", which still survive in some form today:",{"type":33,"tag":132,"props":133,"children":134},"ul",{},[135,154,177],{"type":33,"tag":136,"props":137,"children":138},"li",{},[139,145,147,152],{"type":33,"tag":140,"props":141,"children":142},"code-inline",{},[143],{"type":39,"value":144},"HTML",{"type":39,"value":146}," - ",{"type":33,"tag":54,"props":148,"children":149},{},[150],{"type":39,"value":151},"Hypertext Markup Language",{"type":39,"value":153},", the markup language of web pages.",{"type":33,"tag":136,"props":155,"children":156},{},[157,162,163,168,170,175],{"type":33,"tag":140,"props":158,"children":159},{},[160],{"type":39,"value":161},"URI",{"type":39,"value":146},{"type":33,"tag":54,"props":164,"children":165},{},[166],{"type":39,"value":167},"Uniform Resource Identifier",{"type":39,"value":169},", now known as ",{"type":33,"tag":140,"props":171,"children":172},{},[173],{"type":39,"value":174},"URL",{"type":39,"value":176},", the link you see in your browser's address bar",{"type":33,"tag":136,"props":178,"children":179},{},[180,185,186,191,193,197,199],{"type":33,"tag":140,"props":181,"children":182},{},[183],{"type":39,"value":184},"HTTP",{"type":39,"value":146},{"type":33,"tag":54,"props":187,"children":188},{},[189],{"type":39,"value":190},"Hypertext Transfer Protocol",{"type":39,"value":192},", the basic protocol for communicating with a server and transferring data\r\nIn 1993, Tim gave this technology completely free to use and since then the popularity of the web has grown enormously. The first ever ",{"type":33,"tag":140,"props":194,"children":195},{},[196],{"type":39,"value":144},{"type":39,"value":198}," page has even survived and can be found here: ",{"type":33,"tag":101,"props":200,"children":203},{"href":201,"rel":202,":target":106},"http://info.cern.ch/hypertext/WWW/TheProject.html",[105],[204],{"type":39,"value":205},"TheProject.html",{"type":33,"tag":48,"props":207,"children":208},{},[209],{"type":33,"tag":210,"props":211,"children":215},"img",{"alt":212,"src":213,"title":212,"width":214},"URI format","/article/SPA-SSR-PWA/URI_en.svg","760",[],{"type":33,"tag":41,"props":217,"children":219},{"id":218},"dynamic-websites",[220],{"type":39,"value":221},"Dynamic websites",{"type":33,"tag":48,"props":223,"children":224},{},[225,227,232,234,239,241,246,248,253,255,260],{"type":39,"value":226},"The first websites were called ",{"type":33,"tag":54,"props":228,"children":229},{},[230],{"type":39,"value":231},"static",{"type":39,"value":233}," - their content did not change as the author put it on the web, so they ",{"type":33,"tag":54,"props":235,"children":236},{},[237],{"type":39,"value":238},"remained in that form",{"type":39,"value":240},". Which was great for sharing information, but very soon it started to lack any automation, independent of humans. For example, showing data from the system without having to manually update it on the web. So we get to ",{"type":33,"tag":54,"props":242,"children":243},{},[244],{"type":39,"value":245},"dynamic sites",{"type":39,"value":247}," - these are sites where content is more or less generated on the server using some rule and data. For example, if you want to ",{"type":33,"tag":54,"props":249,"children":250},{},[251],{"type":39,"value":252},"display the results of a football match",{"type":39,"value":254}," or your latest blog post on the site, you'll probably need to ",{"type":33,"tag":54,"props":256,"children":257},{},[258],{"type":39,"value":259},"get the data and then dynamically render it into the site",{"type":39,"value":261},".",{"type":33,"tag":48,"props":263,"children":264},{},[265,267,272,274,279,281,286,288,293,295,300,302,307,309,314],{"type":39,"value":266},"Dynamic content started to emerge back in 1993 with ",{"type":33,"tag":54,"props":268,"children":269},{},[270],{"type":39,"value":271},"CGI (Common Gateway Interface)",{"type":39,"value":273},", but by 1994, for example, ",{"type":33,"tag":140,"props":275,"children":276},{},[277],{"type":39,"value":278},"PHP",{"type":39,"value":280}," version 2 and ",{"type":33,"tag":140,"props":282,"children":283},{},[284],{"type":39,"value":285},"Ruby",{"type":39,"value":287}," had already emerged. This was followed in the next years by ",{"type":33,"tag":140,"props":289,"children":290},{},[291],{"type":39,"value":292},"ASP",{"type":39,"value":294}," (1996), ",{"type":33,"tag":140,"props":296,"children":297},{},[298],{"type":39,"value":299},"Python 1.4",{"type":39,"value":301}," (1996) and also for example ",{"type":33,"tag":140,"props":303,"children":304},{},[305],{"type":39,"value":306},"Java Servrlet",{"type":39,"value":308}," (1997). So content began to be created on servers and sent to browsers where it was rendered. The html structure was very simple and the web carried ",{"type":33,"tag":54,"props":310,"children":311},{},[312],{"type":39,"value":313},"primary informational value",{"type":39,"value":261},{"type":33,"tag":48,"props":316,"children":317},{},[318],{"type":33,"tag":210,"props":319,"children":323},{"alt":320,"src":321,"title":320,"width":322},"Dynamic Web","/article/SPA-SSR-PWA/dynamic_web_en.svg","500",[],{"type":33,"tag":41,"props":325,"children":327},{"id":326},"javascript",[328],{"type":39,"value":329},"Javascript",{"type":33,"tag":48,"props":331,"children":332},{},[333,335,340,342,346,348,353,355,360,362,367,369,374,376,381,383,388,390,395],{"type":39,"value":334},"Finally, we come to JavaScript, the ",{"type":33,"tag":54,"props":336,"children":337},{},[338],{"type":39,"value":339},"programming language for the frontend",{"type":39,"value":341}," (nowadays also the backend). ",{"type":33,"tag":140,"props":343,"children":344},{},[345],{"type":39,"value":329},{"type":39,"value":347}," was invented by a man named ",{"type":33,"tag":54,"props":349,"children":350},{},[351],{"type":39,"value":352},"Brendan Eich",{"type":39,"value":354}," in 1995. It was developed at ",{"type":33,"tag":54,"props":356,"children":357},{},[358],{"type":39,"value":359},"Netscape",{"type":39,"value":361}," for the company's then flagship browser, ",{"type":33,"tag":54,"props":363,"children":364},{},[365],{"type":39,"value":366},"Netscape Navigator",{"type":39,"value":368},". The language was originally to be called ",{"type":33,"tag":140,"props":370,"children":371},{},[372],{"type":39,"value":373},"LiveScript",{"type":39,"value":375},", but was renamed ",{"type":33,"tag":140,"props":377,"children":378},{},[379],{"type":39,"value":380},"JavaScript",{"type":39,"value":382}," so that it could be promoted alongside ",{"type":33,"tag":140,"props":384,"children":385},{},[386],{"type":39,"value":387},"Java",{"type":39,"value":389},", a product of their partner ",{"type":33,"tag":54,"props":391,"children":392},{},[393],{"type":39,"value":394},"Sun Micro Systems",{"type":39,"value":261},{"type":33,"tag":48,"props":397,"children":398},{},[399],{"type":33,"tag":210,"props":400,"children":403},{"alt":401,"src":402,"title":401},"Java is not Javascript","/article/SPA-SSR-PWA/java-is-not-javascript.png",[],{"type":33,"tag":48,"props":405,"children":406},{},[407],{"type":33,"tag":54,"props":408,"children":409},{},[410],{"type":39,"value":411},"JavaScript has almost nothing to do with Java.",{"type":33,"tag":48,"props":413,"children":414},{},[415,417,422,424,429,430,435,437,442,444,449,450,455,457,461,463,468,470,475],{"type":39,"value":416},"In 1997, the ",{"type":33,"tag":140,"props":418,"children":419},{},[420],{"type":39,"value":421},"ECMAScript 1",{"type":39,"value":423}," standard was released, and this increased the popularity of developers using this language. Technology companies come up with ",{"type":33,"tag":54,"props":425,"children":426},{},[427],{"type":39,"value":428},"their own implementation of JavaScript",{"type":39,"value":146},{"type":33,"tag":140,"props":431,"children":432},{},[433],{"type":39,"value":434},"JScript",{"type":39,"value":436}," (",{"type":33,"tag":54,"props":438,"children":439},{},[440],{"type":39,"value":441},"Microsoft",{"type":39,"value":443},"), ",{"type":33,"tag":140,"props":445,"children":446},{},[447],{"type":39,"value":448},"ActionScript",{"type":39,"value":436},{"type":33,"tag":54,"props":451,"children":452},{},[453],{"type":39,"value":454},"Adobe",{"type":39,"value":456},"). There is a flurry of development, with each of the browsers of the time (NetScape, InternetExplorer, Opera, Mozilla) interpreting ",{"type":33,"tag":140,"props":458,"children":459},{},[460],{"type":39,"value":329},{"type":39,"value":462}," a little differently. To the rescue comes ",{"type":33,"tag":140,"props":464,"children":465},{},[466],{"type":39,"value":467},"jQuery",{"type":39,"value":469}," in 2005, which is a library that ",{"type":33,"tag":54,"props":471,"children":472},{},[473],{"type":39,"value":474},"creates an intermediate layer and unifies browser compatibilities",{"type":39,"value":261},{"type":33,"tag":48,"props":477,"children":478},{},[479,481,486,488,492],{"type":39,"value":480},"We find ourselves in a state where the ",{"type":33,"tag":54,"props":482,"children":483},{},[484],{"type":39,"value":485},"backend generates dynamic HTML",{"type":39,"value":487}," and we enhance it with ",{"type":33,"tag":140,"props":489,"children":490},{},[491],{"type":39,"value":329},{"type":39,"value":493}," - Animate, Interact with the user.",{"type":33,"tag":41,"props":495,"children":497},{"id":496},"js-frameworks",[498],{"type":39,"value":499},"JS frameworks",{"type":33,"tag":48,"props":501,"children":502},{},[503,505,510,512,517,519,523,525,530,532,537,538,543,545,550],{"type":39,"value":504},"As the javascript language and needs grow, it becomes confusing to use it in its basic form. This ",{"type":33,"tag":54,"props":506,"children":507},{},[508],{"type":39,"value":509},"creates a lot of libraries with predefined functions",{"type":39,"value":511}," so we don't have to invent them, and more importantly, ",{"type":33,"tag":54,"props":513,"children":514},{},[515],{"type":39,"value":516},"frameworks",{"type":39,"value":518}," are created to build on top of ",{"type":33,"tag":140,"props":520,"children":521},{},[522],{"type":39,"value":329},{"type":39,"value":524}," itself.\r\nI'm thinking of the famous trio of ",{"type":33,"tag":140,"props":526,"children":527},{},[528],{"type":39,"value":529},"React",{"type":39,"value":531},", ",{"type":33,"tag":140,"props":533,"children":534},{},[535],{"type":39,"value":536},"Angular",{"type":39,"value":531},{"type":33,"tag":140,"props":539,"children":540},{},[541],{"type":39,"value":542},"Vue.js",{"type":39,"value":544},", which ",{"type":33,"tag":54,"props":546,"children":547},{},[548],{"type":39,"value":549},"twisted the world of frontend",{"type":39,"value":551}," development and brought a new way of looking at web application development into play.",{"type":33,"tag":48,"props":553,"children":554},{},[555,557,562,564,569],{"type":39,"value":556},"They ",{"type":33,"tag":54,"props":558,"children":559},{},[560],{"type":39,"value":561},"create an abstract layer",{"type":39,"value":563}," that allows us to program where to display what data or entire components, but no longer deal with the complex logic behind when and how to update them. They allow us to ",{"type":33,"tag":54,"props":565,"children":566},{},[567],{"type":39,"value":568},"encapsulate pieces of code into components",{"type":39,"value":570},", classes and objects. It brings code organization, best-practices and much more...",{"type":33,"tag":48,"props":572,"children":573},{},[574],{"type":33,"tag":210,"props":575,"children":578},{"alt":576,"src":577,"title":576},"Výhody SPA frameworků","/article/SPA-SSR-PWA/SPA_features_en.svg",[],{"type":33,"tag":41,"props":580,"children":581},{"id":17},[582],{"type":39,"value":583},"SPA",{"type":33,"tag":48,"props":585,"children":586},{},[587,589,594,596,601,603,608],{"type":39,"value":588},"Single page application is a term that refers to a web application that is loaded into a browser and ",{"type":33,"tag":54,"props":590,"children":591},{},[592],{"type":39,"value":593},"only redraws the parts of the HTML that dynamically change",{"type":39,"value":595},". The server provides the javascript code to the browser, but the page is ",{"type":33,"tag":54,"props":597,"children":598},{},[599],{"type":39,"value":600},"generated in the browser",{"type":39,"value":602},". For example - if you click on a link in the menu on this page you are currently on, the content will be redrawn, but the header and footer will remain unchanged, you won't even see a page reload, the dynamic redraw will take place ",{"type":33,"tag":54,"props":604,"children":605},{},[606],{"type":39,"value":607},"instantly and without waiting for a server response",{"type":39,"value":609}," - because there is no need for one.",{"type":33,"tag":48,"props":611,"children":612},{},[613],{"type":33,"tag":210,"props":614,"children":617},{"alt":615,"src":616,"title":615},"SPA reload","/article/SPA-SSR-PWA/SPA_reload_en.svg",[],{"type":33,"tag":48,"props":619,"children":620},{},[621],{"type":39,"value":622},"So SPA has only one page, the web application javascript page. This has the following implications:",{"type":33,"tag":132,"props":624,"children":625},{},[626,631],{"type":33,"tag":136,"props":627,"children":628},{},[629],{"type":39,"value":630},"SPA will be faster than \"client-server\" web crawling with a request for each page handled",{"type":33,"tag":136,"props":632,"children":633},{},[634,636,641,643,648],{"type":39,"value":635},"SPA itself suffers from bad ",{"type":33,"tag":54,"props":637,"children":638},{},[639],{"type":39,"value":640},"SEO",{"type":39,"value":642},", due to the fact that HTML is rendered only by running JS and ",{"type":33,"tag":54,"props":644,"children":645},{},[646],{"type":39,"value":647},"web crawlers usually can't do that",{"type":39,"value":649}," (even google doesn't do well with indexing SPA)",{"type":33,"tag":41,"props":651,"children":652},{"id":18},[653],{"type":39,"value":654},"SSR",{"type":33,"tag":48,"props":656,"children":657},{},[658,660,665,667,672,674,678,680,685,687,692],{"type":39,"value":659},"In response to poor search engine optimization (SEO) comes a technology called ",{"type":33,"tag":54,"props":661,"children":662},{},[663],{"type":39,"value":664},"Server Site Rendering (SSR)",{"type":39,"value":666},". This solves the SEO problem by ",{"type":33,"tag":54,"props":668,"children":669},{},[670],{"type":39,"value":671},"rendering the HTML on the server",{"type":39,"value":673},", sending the HTML to the browser, which runs ",{"type":33,"tag":140,"props":675,"children":676},{},[677],{"type":39,"value":326},{"type":39,"value":679},", which in turn hydrates and builds a virtual DOM page. It's defacto similar to SPA, except that we ",{"type":33,"tag":54,"props":681,"children":682},{},[683],{"type":39,"value":684},"have full-fledged HTML generated on the server",{"type":39,"value":686}," with all the text, html elements and so on... This enhancement is useful where we want to have a web application ",{"type":33,"tag":54,"props":688,"children":689},{},[690],{"type":39,"value":691},"ready to be indexed by web search engines",{"type":39,"value":693}," like Google bot.",{"type":33,"tag":48,"props":695,"children":696},{},[697,699,704],{"type":39,"value":698},"Also note here that compared to pure SPA, where the page was generated by the browser, ",{"type":33,"tag":54,"props":700,"children":701},{},[702],{"type":39,"value":703},"with SSR we put the burden of generating the page back on the server",{"type":39,"value":705},", as it has been since the beginning of web development.",{"type":33,"tag":41,"props":707,"children":708},{"id":19},[709],{"type":39,"value":710},"PWA",{"type":33,"tag":48,"props":712,"children":713},{},[714,719,721,726],{"type":33,"tag":54,"props":715,"children":716},{},[717],{"type":39,"value":718},"Progressive Web Apps",{"type":39,"value":720}," aim to be more than a web app. By being able to work in a web application (SPA) and hardly needing a server (or not needing one at all), the idea of ",{"type":33,"tag":54,"props":722,"children":723},{},[724],{"type":39,"value":725},"being able to run the application outside of a web browser",{"type":39,"value":727}," with the ability to go offline, just like a native application, is what PWAs are all about, getting more like native applications.",{"type":33,"tag":48,"props":729,"children":730},{},[731,733,738],{"type":39,"value":732},"This type of applications allow to use so called ",{"type":33,"tag":140,"props":734,"children":735},{},[736],{"type":39,"value":737},"Service Workers",{"type":39,"value":739},", which are used just to get closer to the native application, thanks to this we get for example the following possibilities:",{"type":33,"tag":132,"props":741,"children":742},{},[743,748,753,758,763,768],{"type":33,"tag":136,"props":744,"children":745},{},[746],{"type":39,"value":747},"Work with the application offline",{"type":33,"tag":136,"props":749,"children":750},{},[751],{"type":39,"value":752},"Update the application in the background",{"type":33,"tag":136,"props":754,"children":755},{},[756],{"type":39,"value":757},"Sending notifications and push notifications",{"type":33,"tag":136,"props":759,"children":760},{},[761],{"type":39,"value":762},"The ability to access hardware features of the device (e.g. camera, geolocation)",{"type":33,"tag":136,"props":764,"children":765},{},[766],{"type":39,"value":767},"Loading and caching data",{"type":33,"tag":136,"props":769,"children":770},{},[771],{"type":39,"value":772},"Create a security layer",{"type":33,"tag":774,"props":775,"children":777},"h3",{"id":776},"what-does-it-look-like-in-practice",[778],{"type":39,"value":779},"What does it look like in practice?",{"type":33,"tag":48,"props":781,"children":782},{},[783,785,790,792,797,799,804],{"type":39,"value":784},"I'm sure you've seen this on some web applications, in the browser you can ",{"type":33,"tag":54,"props":786,"children":787},{},[788],{"type":39,"value":789},"click on the icon next to the address bar",{"type":39,"value":791}," which creates a new window from the web page that is slightly different from the search engine window and creates a ",{"type":33,"tag":54,"props":793,"children":794},{},[795],{"type":39,"value":796},"desktop icon",{"type":39,"value":798}," that you can use to launch the PWA.\r\nYou can try it right away, this page enables PWA and ",{"type":33,"tag":54,"props":800,"children":801},{},[802],{"type":39,"value":803},"just install the app",{"type":39,"value":805},", see image below (Chrome browser).",{"type":33,"tag":48,"props":807,"children":808},{},[809],{"type":33,"tag":210,"props":810,"children":813},{"alt":811,"src":812,"title":811},"PWA in practice","/article/SPA-SSR-PWA/PWA_en.png",[],{"type":33,"tag":48,"props":815,"children":816},{},[817],{"type":39,"value":818},"Other examples you may be familiar with are Figma, Facebook or Freelo.",{"type":33,"tag":41,"props":820,"children":822},{"id":821},"conclusion",[823],{"type":39,"value":824},"Conclusion",{"type":33,"tag":48,"props":826,"children":827},{},[828,830,835,837,842,844],{"type":39,"value":829},"If you've read this far in the article you should have a basic ",{"type":33,"tag":54,"props":831,"children":832},{},[833],{"type":39,"value":834},"understanding of what SPA, SSR, PWA are",{"type":39,"value":836}," and why these technologies have come into existence. Below the article I will add some resources that I think are ",{"type":33,"tag":54,"props":838,"children":839},{},[840],{"type":39,"value":841},"worth studying",{"type":39,"value":843}," if you are interested in this topic. If you come across any questions or inconsistencies while reading, ",{"type":33,"tag":54,"props":845,"children":846},{},[847],{"type":39,"value":848},"feel free to email me :)",{"type":33,"tag":41,"props":850,"children":852},{"id":851},"useful-links",[853],{"type":39,"value":854},"Useful links",{"type":33,"tag":132,"props":856,"children":857},{},[858,868,878,888,898,908],{"type":33,"tag":136,"props":859,"children":860},{},[861],{"type":33,"tag":101,"props":862,"children":865},{"href":863,"rel":864,":rel":105},"https://home.cern/science/computing/birth-web/short-history-web",[105],[866],{"type":39,"value":867},"Web History (CERN)",{"type":33,"tag":136,"props":869,"children":870},{},[871],{"type":33,"tag":101,"props":872,"children":875},{"href":873,"rel":874,":rel":105},"https://en.wikipedia.org/wiki/Single-page_application",[105],[876],{"type":39,"value":877},"SPA Wikipedia",{"type":33,"tag":136,"props":879,"children":880},{},[881],{"type":33,"tag":101,"props":882,"children":885},{"href":883,"rel":884,":rel":105},"https://web.dev/rendering-on-the-web/",[105],[886],{"type":39,"value":887},"About SSR on web.dev",{"type":33,"tag":136,"props":889,"children":890},{},[891],{"type":33,"tag":101,"props":892,"children":895},{"href":893,"rel":894,":rel":105},"https://vuejs.org/guide/scaling-up/ssr.html#what-is-ssr",[105],[896],{"type":39,"value":897},"SSR in Vue.js",{"type":33,"tag":136,"props":899,"children":900},{},[901],{"type":33,"tag":101,"props":902,"children":905},{"href":903,"rel":904,":rel":105},"https://web.dev/progressive-web-apps/",[105],[906],{"type":39,"value":907},"About PWA on web.dev",{"type":33,"tag":136,"props":909,"children":910},{},[911],{"type":33,"tag":101,"props":912,"children":915},{"href":913,"rel":914,":rel":105},"https://www.youtube.com/watch?v=sFsRylCQblw",[105],[916],{"type":39,"value":917},"Short video about PWA on Fireship",{"title":8,"searchDepth":919,"depth":919,"links":920},2,[921,922,923,924,925,926,927,928,932,933],{"id":43,"depth":919,"text":46},{"id":70,"depth":919,"text":73},{"id":218,"depth":919,"text":221},{"id":326,"depth":919,"text":329},{"id":496,"depth":919,"text":499},{"id":17,"depth":919,"text":583},{"id":18,"depth":919,"text":654},{"id":19,"depth":919,"text":710,"children":929},[930],{"id":776,"depth":931,"text":779},3,{"id":821,"depth":919,"text":824},{"id":851,"depth":919,"text":854},"markdown","content:knowledge:what-are-SPA-SSR-PWA-and-what-are-the-benefits-and-disadvantages.md","content","knowledge/what-are-SPA-SSR-PWA-and-what-are-the-benefits-and-disadvantages.md","md",[940],{"_path":941,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":942,"description":943,"author":11,"date":944,"readingTime":945,"level":14,"image":946,"tags":947,"slugs":952,"relatedArticles":955,"body":958,"_type":934,"_id":1647,"_source":936,"_file":1648,"_extension":938},"/knowledge/coder-vs-graphic-designer-how-to-prepare-design-and-deliver-good-quality-results","Coder VS Graphic Designer - How to properly prepare design and deliver a good quality result","A few tips on how to prepare documents for a coder to deliver the best possible result. I explain the perspectives of both sides and try to outline best-practices for preparing the documents.","2023-06-26",12,"/featured/graphics-vs-coder.jpg",[948,949,950,20,951],"figma","adobexd","bestpractice","css",{"en":953,"cs":954},"coder-vs-graphic-designer-how-to-prepare-design-and-deliver-good-quality-results","koder-vs-grafik-jak-spravne-pripravit-podklady-a-dorucit-kvalitni-vysledek",[956,26,957],"7-most-common-web-developer-mistakes","guide-to-the-world-of-web-image-formats",{"type":30,"children":959,"toc":1631},[960,966,970,989,1071,1077,1088,1106,1132,1140,1145,1151,1182,1191,1203,1209,1277,1283,1302,1321,1326,1337,1345,1351,1363,1369,1381,1390,1396,1401,1407,1419,1425,1466,1472,1579,1583,1595,1600,1604,1608],{"type":33,"tag":34,"props":961,"children":963},{"id":962},"coder-vs-graphic-designer-how-to-properly-prepare-documents-and-deliver-a-quality-result",[964],{"type":39,"value":965},"Coder VS Graphic Designer - How to properly prepare documents and deliver a quality result",{"type":33,"tag":41,"props":967,"children":968},{"id":43},[969],{"type":39,"value":46},{"type":33,"tag":48,"props":971,"children":972},{},[973,975,980,982,987],{"type":39,"value":974},"This article is about two worlds - the world of ",{"type":33,"tag":54,"props":976,"children":977},{},[978],{"type":39,"value":979},"web design",{"type":39,"value":981}," and the world of ",{"type":33,"tag":54,"props":983,"children":984},{},[985],{"type":39,"value":986},"coding",{"type":39,"value":988},". It is meant to describe the issues that happen in practice. At the same time, it will also show some best-practices that I think are good to know, using concrete examples.",{"type":33,"tag":990,"props":991,"children":992},"cards",{},[993,1029],{"type":33,"tag":994,"props":995,"children":996},"card",{},[997,1003],{"type":33,"tag":41,"props":998,"children":1000},{"id":999},"graphic-designers-view",[1001],{"type":39,"value":1002},"Graphic designer's view",{"type":33,"tag":48,"props":1004,"children":1005},{},[1006,1008,1013,1015,1020,1022,1027],{"type":39,"value":1007},"The incentive of a graphic designer is to ",{"type":33,"tag":54,"props":1009,"children":1010},{},[1011],{"type":39,"value":1012},"deliver a good graphical result",{"type":39,"value":1014},". A design that will have a wow effect, that will be modern and maybe even novel. Something that puts a piece of themselves into it, dazzles the client and fits the brief at the same time. A good graphic designer follows trends, tries to combine new elements and push themselves in creativity.\nHowever, in my experience, a graphic designer often doesn't want to get bogged down in technicalities. He doesn't start learning the differences between ",{"type":33,"tag":140,"props":1016,"children":1017},{},[1018],{"type":39,"value":1019},"background-size:cover;",{"type":39,"value":1021}," vs ",{"type":33,"tag":140,"props":1023,"children":1024},{},[1025],{"type":39,"value":1026},"background-size:contain;",{"type":39,"value":1028}," or studying the grid of, for example, Bootstrap.",{"type":33,"tag":994,"props":1030,"children":1031},{},[1032,1038],{"type":33,"tag":41,"props":1033,"children":1035},{"id":1034},"coders-view",[1036],{"type":39,"value":1037},"Coder's view",{"type":33,"tag":48,"props":1039,"children":1040},{},[1041,1043,1048,1050,1055,1057,1062,1064,1069],{"type":39,"value":1042},"While from the coder's side, it's often about converting ",{"type":33,"tag":54,"props":1044,"children":1045},{},[1046],{"type":39,"value":1047},"design into a consistent form",{"type":39,"value":1049}," that has order and rules if possible. Defining a reasonable number of colors and fonts. Splitting the page into reusable components or spacing in nice numbers - who wants to have ",{"type":33,"tag":140,"props":1051,"children":1052},{},[1053],{"type":39,"value":1054},"padding-left: 17px;",{"type":39,"value":1056}," ? or even worse ",{"type":33,"tag":140,"props":1058,"children":1059},{},[1060],{"type":39,"value":1061},"padding-left: 1.0625rem",{"type":39,"value":1063},".\nOn the other hand, coders often lack ",{"type":33,"tag":54,"props":1065,"children":1066},{},[1067],{"type":39,"value":1068},"understanding of the graphic designer's intent",{"type":39,"value":1070},". Yes the ratio of logo size to font size in menus is important to keep, as is symmetrical indentation of products in category listings and so on...",{"type":33,"tag":41,"props":1072,"children":1074},{"id":1073},"what-about-it",[1075],{"type":39,"value":1076},"What about it?",{"type":33,"tag":48,"props":1078,"children":1079},{},[1080,1082,1087],{"type":39,"value":1081},"Exactly the same as in any human-to-human relationship, i.e. ",{"type":33,"tag":54,"props":1083,"children":1084},{},[1085],{"type":39,"value":1086},"communicate",{"type":39,"value":261},{"type":33,"tag":48,"props":1089,"children":1090},{},[1091,1093,1098,1100,1105],{"type":39,"value":1092},"Graphic designers don't be afraid to ",{"type":33,"tag":54,"props":1094,"children":1095},{},[1096],{"type":39,"value":1097},"ask coders what's important to them",{"type":39,"value":1099},", let yourself be drawn into their world a bit and take away what will be pivotal to delivering maximum final quality. Ask what you can do to make the coded result more like the design, if they use any CSS frameworks and what their patterns are, what JS libraries they prefer to work with, and if they have any specifics that would be good to know about before designing something that will subsequently be a terrible ",{"type":33,"tag":54,"props":1101,"children":1102},{},[1103],{"type":39,"value":1104},"bottle-neck",{"type":39,"value":261},{"type":33,"tag":48,"props":1107,"children":1108},{},[1109,1111,1116,1118,1123,1125,1130],{"type":39,"value":1110},"Coders ",{"type":33,"tag":54,"props":1112,"children":1113},{},[1114],{"type":39,"value":1115},"don't be afraid to go",{"type":39,"value":1117}," back ",{"type":33,"tag":54,"props":1119,"children":1120},{},[1121],{"type":39,"value":1122},"to the graphic designer",{"type":39,"value":1124}," with the delivered design and tell him what you're struggling with, or what you need to dodge in the design, so that the result is the best possible and maybe also that the time spent is efficient. If you don't have a responsive design delivered then at least ask for a ",{"type":33,"tag":54,"props":1126,"children":1127},{},[1128],{"type":39,"value":1129},"key part",{"type":39,"value":1131}," in the responsive design, it won't cost the graphic designer so much time and you won't worry about figuring it out on mobile.",{"type":33,"tag":48,"props":1133,"children":1134},{},[1135],{"type":33,"tag":210,"props":1136,"children":1139},{"alt":1137,"src":1138,"title":1137},"Graphic designer and coder form a team","/article/coder-vs-designer/dream-team-en.svg",[],{"type":33,"tag":48,"props":1141,"children":1142},{},[1143],{"type":39,"value":1144},"In the following sections, I will discuss specific examples that I would recommend from a coder's perspective for a design development workflow.",{"type":33,"tag":41,"props":1146,"children":1148},{"id":1147},"colour-definition",[1149],{"type":39,"value":1150},"Colour definition",{"type":33,"tag":48,"props":1152,"children":1153},{},[1154,1156,1161,1162,1167,1168,1173,1175,1180],{"type":39,"value":1155},"Every modern web design software can define key colors that can be used in a project. For the coder it is a great help if the graphic designer defines and ideally describes them (in the style of ",{"type":33,"tag":140,"props":1157,"children":1158},{},[1159],{"type":39,"value":1160},"primary-100",{"type":39,"value":531},{"type":33,"tag":140,"props":1163,"children":1164},{},[1165],{"type":39,"value":1166},"primary-200",{"type":39,"value":531},{"type":33,"tag":140,"props":1169,"children":1170},{},[1171],{"type":39,"value":1172},"primary-300",{"type":39,"value":1174},"). He then uses only the colors he has defined, this allows the coder to create ",{"type":33,"tag":54,"props":1176,"children":1177},{},[1178],{"type":39,"value":1179},"identically named variables",{"type":39,"value":1181}," and when coding he doesn't even worry about the hex number of the color, he just looks at the name and uses the identically named variable.",{"type":33,"tag":48,"props":1183,"children":1184},{},[1185],{"type":33,"tag":210,"props":1186,"children":1190},{"alt":1187,"src":1188,"title":1187,"width":1189},"Using colors from Figma in CSS code","/article/coder-vs-designer/figma-css-and-tailwind.png","620",[],{"type":33,"tag":48,"props":1192,"children":1193},{},[1194,1196,1201],{"type":39,"value":1195},"Additionally, variables named this way (ideally mirrored ",{"type":33,"tag":54,"props":1197,"children":1198},{},[1199],{"type":39,"value":1200},"design \u003C-> code",{"type":39,"value":1202},") make it very easy to re-brand the page. That is, by changing one variable, you can overwrite the color of the entire site.",{"type":33,"tag":41,"props":1204,"children":1206},{"id":1205},"spacing-padding-margin",[1207],{"type":39,"value":1208},"Spacing, padding, margin",{"type":33,"tag":48,"props":1210,"children":1211},{},[1212,1214,1219,1221,1226,1228,1233,1235,1240,1242,1247,1249,1254,1256,1261,1263,1268,1270,1275],{"type":39,"value":1213},"Another minor difficulty is the values chosen for indentation, either internal ",{"type":33,"tag":140,"props":1215,"children":1216},{},[1217],{"type":39,"value":1218},"padding",{"type":39,"value":1220}," or external ",{"type":33,"tag":140,"props":1222,"children":1223},{},[1224],{"type":39,"value":1225},"margin",{"type":39,"value":1227},". The problem occurs when the graphic designer chooses values by eye and ",{"type":33,"tag":54,"props":1229,"children":1230},{},[1231],{"type":39,"value":1232},"doesn't have insight",{"type":39,"value":1234}," into the coder's techstack. Whether we're talking about bootstrap grid values or perhaps tailwind values, no coder is going to be too happy specifying ",{"type":33,"tag":54,"props":1236,"children":1237},{},[1238],{"type":39,"value":1239},"\"magic numbers \"",{"type":39,"value":1241}," like ",{"type":33,"tag":140,"props":1243,"children":1244},{},[1245],{"type":39,"value":1246},"padding: 11px 23px;",{"type":39,"value":1248}," but instead choose the near eye-pleasing values of ",{"type":33,"tag":140,"props":1250,"children":1251},{},[1252],{"type":39,"value":1253},"padding: 12px 25px;",{"type":39,"value":1255}," or if we're talking about Tailwind, the utility classes ",{"type":33,"tag":140,"props":1257,"children":1258},{},[1259],{"type":39,"value":1260},"py-3",{"type":39,"value":1262}," ",{"type":33,"tag":140,"props":1264,"children":1265},{},[1266],{"type":39,"value":1267},"px-6",{"type":39,"value":1269},".\nNeither option is a happy ending, the ideal would be to sit down with a graphic designer and see how spacing works together in ",{"type":33,"tag":54,"props":1271,"children":1272},{},[1273],{"type":39,"value":1274},"what you like to do",{"type":39,"value":1276},". After all, even the graphic designer will be happier if it fits better.",{"type":33,"tag":41,"props":1278,"children":1280},{"id":1279},"components",[1281],{"type":39,"value":1282},"Components",{"type":33,"tag":48,"props":1284,"children":1285},{},[1286,1288,1293,1295,1300],{"type":39,"value":1287},"A great thing in modern web design is the ability to wrap a part of the GUI, or one particular element, into a ",{"type":33,"tag":54,"props":1289,"children":1290},{},[1291],{"type":39,"value":1292},"component",{"type":39,"value":1294}," and then ",{"type":33,"tag":54,"props":1296,"children":1297},{},[1298],{"type":39,"value":1299},"reuse",{"type":39,"value":1301}," it. The satisfying part is that this is exactly what we can do in development, we can wrap a component and reuse it with different inputs and therefore content.",{"type":33,"tag":48,"props":1303,"children":1304},{},[1305,1307,1312,1314,1319],{"type":39,"value":1306},"This means a lot, for example you can define ",{"type":33,"tag":54,"props":1308,"children":1309},{},[1310],{"type":39,"value":1311},"component states",{"type":39,"value":1313}," in the design and design how the active input field will look like for example. It is possible to reuse a component to create a binding to a so-called master component and by changing the design in the ",{"type":33,"tag":54,"props":1315,"children":1316},{},[1317],{"type":39,"value":1318},"master component",{"type":39,"value":1320}," to reflect the changes in all places where it is used.",{"type":33,"tag":48,"props":1322,"children":1323},{},[1324],{"type":39,"value":1325},"Theoretically, this can help the programmer lay out the distribution into components, because if they know you'll be using a piece of UI in multiple places, they'll create a component right away.",{"type":33,"tag":48,"props":1327,"children":1328},{},[1329,1331,1336],{"type":39,"value":1330},"By starting to create the components as a graphic designer, you are subtly forcing yourself to use them on the site, thus ",{"type":33,"tag":54,"props":1332,"children":1333},{},[1334],{"type":39,"value":1335},"saving the programmer development time",{"type":39,"value":261},{"type":33,"tag":48,"props":1338,"children":1339},{},[1340],{"type":33,"tag":210,"props":1341,"children":1344},{"alt":1342,"src":1343,"title":1342,"width":1189},"Using components in Figma","/article/coder-vs-designer/components.png",[],{"type":33,"tag":41,"props":1346,"children":1348},{"id":1347},"export-icons",[1349],{"type":39,"value":1350},"Export icons",{"type":33,"tag":48,"props":1352,"children":1353},{},[1354,1356,1361],{"type":39,"value":1355},"Saving vector icons for use on the web is a discipline in itself for me. It depends a lot on ",{"type":33,"tag":54,"props":1357,"children":1358},{},[1359],{"type":39,"value":1360},"how you work with icons on the web",{"type":39,"value":1362},", and the requirements for saving them properly depend on that. However, I will allow myself to pick out a few general pointers.",{"type":33,"tag":774,"props":1364,"children":1366},{"id":1365},"size-ratio",[1367],{"type":39,"value":1368},"Size, ratio",{"type":33,"tag":48,"props":1370,"children":1371},{},[1372,1374,1379],{"type":39,"value":1373},"Icons that are to be next to/above each other or are required to be aligned in some way, it is very important to export them with ",{"type":33,"tag":54,"props":1375,"children":1376},{},[1377],{"type":39,"value":1378},"exactly the same canvas/artboard",{"type":39,"value":1380}," (drawing area). Personally, I recommend putting X identical artboards side by side and placing the icons one at a time so that they visually match and at the same time the icons don't have too much empty space around them. This will give us the best chance of having them display great on the site.",{"type":33,"tag":48,"props":1382,"children":1383},{},[1384],{"type":33,"tag":210,"props":1385,"children":1389},{"alt":1386,"src":1387,"title":1386,"width":1388},"Export icons for font","/article/coder-vs-designer/icons.png","450",[],{"type":33,"tag":774,"props":1391,"children":1393},{"id":1392},"style",[1394],{"type":39,"value":1395},"Style",{"type":33,"tag":48,"props":1397,"children":1398},{},[1399],{"type":39,"value":1400},"If we want the icons to look the same style we need to give them the same stroke thickness, again it's a good idea to line them up in artboards and check them all at once.",{"type":33,"tag":774,"props":1402,"children":1404},{"id":1403},"icons-with-stroke",[1405],{"type":39,"value":1406},"Icons with stroke",{"type":33,"tag":48,"props":1408,"children":1409},{},[1410,1412,1417],{"type":39,"value":1411},"We always export icons (unless otherwise required) by converting ",{"type":33,"tag":54,"props":1413,"children":1414},{},[1415],{"type":39,"value":1416},"stroke to shape",{"type":39,"value":1418},", called the outline stroke function. This way the icon loses the ability to change the stroke thickness, which is what we want on the site, because it will behave consistently when zoomed in/out.",{"type":33,"tag":774,"props":1420,"children":1422},{"id":1421},"icons-in-font",[1423],{"type":39,"value":1424},"Icons in font",{"type":33,"tag":48,"props":1426,"children":1427},{},[1428,1430,1435,1437,1442,1444,1449,1451,1456,1458,1465],{"type":39,"value":1429},"If icons need to be exported with the intention of generating a font from them, then it is important to pay attention to other criteria. If we consider generating a font from Fontella, for example, then we need to have the icon ",{"type":33,"tag":54,"props":1431,"children":1432},{},[1433],{"type":39,"value":1434},"unified into one shape",{"type":39,"value":1436}," (union).\nFurthermore, we need to have the icon only in ",{"type":33,"tag":54,"props":1438,"children":1439},{},[1440],{"type":39,"value":1441},"one color",{"type":39,"value":1443},", without any background, because once the icon is converted to a font, it will be completely colored to the text color (CSS color value).\nIf you are generating a font using Figma, make sure that the resulting SVG does not contain the ",{"type":33,"tag":140,"props":1445,"children":1446},{},[1447],{"type":39,"value":1448},"fill-rule:evenodd;",{"type":39,"value":1450}," or ",{"type":33,"tag":140,"props":1452,"children":1453},{},[1454],{"type":39,"value":1455},"clip-rule:evenodd;",{"type":39,"value":1457}," attributes, because Fontello can't handle those. If you'd like to know more about the combination of fontello and figma, then I recommend ",{"type":33,"tag":101,"props":1459,"children":1462},{"href":1460,"rel":1461,":target":106},"https://medium.com/mabiloft/we-designed-an-icon-font-with-figma-and-fontello-and-it-has-not-been-a-piece-of-cake-b2948973738e",[105],[1463],{"type":39,"value":1464},"this article",{"type":39,"value":261},{"type":33,"tag":41,"props":1467,"children":1469},{"id":1468},"a-few-tips-for-the-end",[1470],{"type":39,"value":1471},"A few tips for the end",{"type":33,"tag":990,"props":1473,"children":1474},{},[1475,1536],{"type":33,"tag":994,"props":1476,"children":1477},{},[1478,1484,1515,1524],{"type":33,"tag":774,"props":1479,"children":1481},{"id":1480},"kits-for-graphics",[1482],{"type":39,"value":1483},"Kits for graphics",{"type":33,"tag":48,"props":1485,"children":1486},{},[1487,1489,1496,1498,1504,1506,1513],{"type":39,"value":1488},"Help yourself with the technical stuff by using pre-made templates, for example for Bootstrap grid there is ",{"type":33,"tag":101,"props":1490,"children":1493},{"href":1491,"rel":1492,":target":106},"https://www.figma.com/community/file/1021683007799895845/Bootstrap-Grid-V4-V5",[105],[1494],{"type":39,"value":1495},"this",{"type":39,"value":1497}," template. If you want a whole kit of components for Booststrap, then I recommend ",{"type":33,"tag":101,"props":1499,"children":1502},{"href":1500,"rel":1501,":target":106},"https://www.figma.com/community/file/1044316192441037087/Bootstrap-5-Design-System---UI-Kit",[105],[1503],{"type":39,"value":1495},{"type":39,"value":1505}," template.\nThen for the tailwind template, ",{"type":33,"tag":101,"props":1507,"children":1510},{"href":1508,"rel":1509,":target":106},"https://www.figma.com/community/file/768809027799962739/Tailwind-CSS-UI",[105],[1511],{"type":39,"value":1512},"this kit",{"type":39,"value":1514}," is useful, showing the basic principles of the framework.",{"type":33,"tag":48,"props":1516,"children":1517},{},[1518],{"type":33,"tag":210,"props":1519,"children":1523},{"alt":1520,"src":1521,"title":1520,"width":1522},"UI Kit for figma","/article/coder-vs-designer/ui-kit.png","370",[],{"type":33,"tag":48,"props":1525,"children":1526},{},[1527,1529,1534],{"type":39,"value":1528},"The point I'm trying to make is ",{"type":33,"tag":54,"props":1530,"children":1531},{},[1532],{"type":39,"value":1533},"make your job easier",{"type":39,"value":1535},", there are a great many shared libraries/plugins that will make your job easier. Just check with your dev team and pick the right workflow.",{"type":33,"tag":994,"props":1537,"children":1538},{},[1539,1545,1566,1571],{"type":33,"tag":41,"props":1540,"children":1542},{"id":1541},"extensions-for-coders",[1543],{"type":39,"value":1544},"Extensions for coders",{"type":33,"tag":48,"props":1546,"children":1547},{},[1548,1550,1555,1557,1564],{"type":39,"value":1549},"It's been my experience that us coders can sometimes lack an eye for detail and simply may not notice some small difference in design. That's why it's always a good idea to ",{"type":33,"tag":54,"props":1551,"children":1552},{},[1553],{"type":39,"value":1554},"compare the design with the final site",{"type":39,"value":1556}," and check if everything is displaying correctly. For this purpose, I personally use the browser extension ",{"type":33,"tag":101,"props":1558,"children":1561},{"href":1559,"rel":1560,":target":106},"https://chrome.google.com/webstore/detail/perfectpixel-by-welldonec/dkaagdgjmgdmbnecmcefdhjekcoceebi",[105],[1562],{"type":39,"value":1563},"Pixel Perfect",{"type":39,"value":1565},", which allows you to overlay the design over the site and see the differences in the result compared to the original design.",{"type":33,"tag":48,"props":1567,"children":1568},{},[1569],{"type":39,"value":1570},"Note: I don't think we should create pixel-perfect code because the web is a fluid medium, but I think it's necessary to do at least a cursory check to make sure everything fits as it should.",{"type":33,"tag":48,"props":1572,"children":1573},{},[1574],{"type":33,"tag":210,"props":1575,"children":1578},{"alt":1576,"src":1577,"title":1576,"width":1522},"Pixel perfect - sample","/article/coder-vs-designer/perfect-design-en.png",[],{"type":33,"tag":41,"props":1580,"children":1581},{"id":821},[1582],{"type":39,"value":824},{"type":33,"tag":48,"props":1584,"children":1585},{},[1586,1588,1593],{"type":39,"value":1587},"The creative world of a graphic designer and the exact world of a coder are very different, but both should have the same goal - ",{"type":33,"tag":54,"props":1589,"children":1590},{},[1591],{"type":39,"value":1592},"deliver great final quality",{"type":39,"value":1594},". The only way to achieve this is by fine-tuning our workflows together and educating and learning about each other's worlds.",{"type":33,"tag":48,"props":1596,"children":1597},{},[1598],{"type":39,"value":1599},"Did you miss any information in the article? Do you have any questions? Feel free to contact me :)",{"type":33,"tag":1601,"props":1602,"children":1603},"hr",{},[],{"type":33,"tag":41,"props":1605,"children":1606},{"id":851},[1607],{"type":39,"value":854},{"type":33,"tag":132,"props":1609,"children":1610},{},[1611,1621],{"type":33,"tag":136,"props":1612,"children":1613},{},[1614],{"type":33,"tag":101,"props":1615,"children":1618},{"href":1616,"rel":1617,":rel":105},"https://www.figma.com/best-practices/",[105],[1619],{"type":39,"value":1620},"Best Practice in Figma",{"type":33,"tag":136,"props":1622,"children":1623},{},[1624],{"type":33,"tag":101,"props":1625,"children":1628},{"href":1626,"rel":1627,":rel":105},"https://www.adobe.com/products/xd/learn/design/layout/web-design-best-practices.html",[105],[1629],{"type":39,"value":1630},"Best Practice in Adobe XD",{"title":8,"searchDepth":919,"depth":919,"links":1632},[1633,1634,1635,1636,1637,1638,1644,1645,1646],{"id":43,"depth":919,"text":46},{"id":1073,"depth":919,"text":1076},{"id":1147,"depth":919,"text":1150},{"id":1205,"depth":919,"text":1208},{"id":1279,"depth":919,"text":1282},{"id":1347,"depth":919,"text":1350,"children":1639},[1640,1641,1642,1643],{"id":1365,"depth":931,"text":1368},{"id":1392,"depth":931,"text":1395},{"id":1403,"depth":931,"text":1406},{"id":1421,"depth":931,"text":1424},{"id":1468,"depth":919,"text":1471},{"id":821,"depth":919,"text":824},{"id":851,"depth":919,"text":854},"content:knowledge:coder-vs-graphic-designer-how-to-prepare-design-and-deliver-good-quality-results.md","knowledge/coder-vs-graphic-designer-how-to-prepare-design-and-deliver-good-quality-results.md",[1650],{"_path":1651,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":1652,"description":1653,"author":11,"date":1654,"readingTime":1655,"level":14,"image":1656,"tags":1657,"slugs":1660,"relatedArticles":1662,"body":1664,"_type":934,"_id":2660,"_source":936,"_file":2661,"_extension":938},"/knowledge/guide-to-the-world-of-web-image-formats","Guide to the World of Web Image Formats","Learn the differences between the different formats and their advantages and disadvantages. We will show examples of how to use them and when to use which format.","2023-11-14",10,"/featured/image-formats.jpg",[20,1658,1659],"basics","web",{"en":957,"cs":1661},"pruvodce-svetem-formatu-webovych-obrazku",[953,1663,26],"web-accessibility-guide",{"type":30,"children":1665,"toc":2647},[1666,1672,1676,1688,1708,1720,1729,1735,1804,1810,1815,1821,1853,1861,1872,1880,1891,1899,1911,1914,1920,1939,1947,1954,1972,1979,1991,1994,2000,2012,2020,2028,2040,2072,2079,2091,2094,2100,2125,2132,2143,2150,2168,2176,2189,2197,2200,2206,2211,2553,2557,2576,2594,2599,2603],{"type":33,"tag":34,"props":1667,"children":1669},{"id":1668},"a-guide-to-the-world-of-web-image-formats",[1670],{"type":39,"value":1671},"A guide to the world of web image formats",{"type":33,"tag":34,"props":1673,"children":1674},{"id":43},[1675],{"type":39,"value":46},{"type":33,"tag":48,"props":1677,"children":1678},{},[1679,1681,1686],{"type":39,"value":1680},"We encounter images on the web on almost every page. Some of them load at lightning speed, while others can take a while to load with a mobile connection. Yet getting a handle on web images is ",{"type":33,"tag":54,"props":1682,"children":1683},{},[1684],{"type":39,"value":1685},"one of the most important things",{"type":39,"value":1687}," when creating a new website or modifying an existing one.",{"type":33,"tag":48,"props":1689,"children":1690},{},[1691,1693,1700,1702,1707],{"type":39,"value":1692},"The speed of images can also show up in what we call ",{"type":33,"tag":101,"props":1694,"children":1697},{"href":1695,"rel":1696,"target":106},"https://web.dev/articles/vitals",[105],[1698],{"type":39,"value":1699},"web vitals",{"type":39,"value":1701},", which are basic web speed metrics, and it's also one of the criteria Google uses to determine ",{"type":33,"tag":54,"props":1703,"children":1704},{},[1705],{"type":39,"value":1706},"the ranking of pages in a search listing",{"type":39,"value":261},{"type":33,"tag":48,"props":1709,"children":1710},{},[1711,1713,1718],{"type":39,"value":1712},"This article aims to introduce you to the ",{"type":33,"tag":54,"props":1714,"children":1715},{},[1716],{"type":39,"value":1717},"basic image formats",{"type":39,"value":1719}," and put you into practice using them, listing some best-practices and explaining their differences.",{"type":33,"tag":48,"props":1721,"children":1722},{},[1723],{"type":33,"tag":210,"props":1724,"children":1728},{"alt":1725,"src":1726,"title":1725,"width":1727},"JPG or PNG meme","/article/image-formats/jpg-or-png.jpg","250",[],{"type":33,"tag":41,"props":1730,"children":1732},{"id":1731},"basis",[1733],{"type":39,"value":1734},"Basis",{"type":33,"tag":990,"props":1736,"children":1737},{},[1738,1764],{"type":33,"tag":994,"props":1739,"children":1740},{},[1741,1747],{"type":33,"tag":774,"props":1742,"children":1744},{"id":1743},"bitmap",[1745],{"type":39,"value":1746},"Bitmap",{"type":33,"tag":48,"props":1748,"children":1749},{},[1750,1752,1757,1759],{"type":39,"value":1751},"Image formats can be divided into two groups, the first group is ",{"type":33,"tag":54,"props":1753,"children":1754},{},[1755],{"type":39,"value":1756},"bitmap images",{"type":39,"value":1758}," (photos, product renders, etc.) which are created from points (pixels). These formats are limited by their quality, you have to pay attention to their size (resolution), we will talk more about image sizes below.\r\n",{"type":33,"tag":210,"props":1760,"children":1763},{"alt":1761,"src":1762,"title":1761},"Sample bitmap image","/article/image-formats/bitmap_en.png",[],{"type":33,"tag":994,"props":1765,"children":1766},{},[1767,1773],{"type":33,"tag":774,"props":1768,"children":1770},{"id":1769},"vector",[1771],{"type":39,"value":1772},"Vector",{"type":33,"tag":48,"props":1774,"children":1775},{},[1776,1778,1783,1785,1790,1792,1797,1799],{"type":39,"value":1777},"The second group are ",{"type":33,"tag":54,"props":1779,"children":1780},{},[1781],{"type":39,"value":1782},"vector images",{"type":39,"value":1784},", these are images that are written using ",{"type":33,"tag":54,"props":1786,"children":1787},{},[1788],{"type":39,"value":1789},"curves and shapes",{"type":39,"value":1791},". Thanks to this notation, they can be enlarged indefinitely, as their shape is mathematically written. So you don't have to worry about the quality of the image, it stays the same. However, what we need to be careful of is that the vector is not ",{"type":33,"tag":54,"props":1793,"children":1794},{},[1795],{"type":39,"value":1796},"too complex",{"type":39,"value":1798},", if we have too many shapes in the image, it could slow down the site as all the shapes have to be calculated to render it.\r\n",{"type":33,"tag":210,"props":1800,"children":1803},{"alt":1801,"src":1802,"title":1801},"Sample vector image","/article/image-formats/vector_en.svg",[],{"type":33,"tag":41,"props":1805,"children":1807},{"id":1806},"image-formats",[1808],{"type":39,"value":1809},"Image formats",{"type":33,"tag":48,"props":1811,"children":1812},{},[1813],{"type":39,"value":1814},"Images can be stored in many ways, depending on their use and content we choose the right ones. Image formats can also be messed up, so let's take a look at the differences between them.",{"type":33,"tag":774,"props":1816,"children":1818},{"id":1817},"jpgjpeg",[1819],{"type":39,"value":1820},"JPG/JPEG",{"type":33,"tag":48,"props":1822,"children":1823},{},[1824,1826,1831,1833,1838,1840,1845,1847,1852],{"type":39,"value":1825},"A format you've probably already met, it is the ",{"type":33,"tag":54,"props":1827,"children":1828},{},[1829],{"type":39,"value":1830},"JPG or JPEG",{"type":39,"value":1832}," format and is used to store photos, pictures of cats, products and so on... This format is a ",{"type":33,"tag":54,"props":1834,"children":1835},{},[1836],{"type":39,"value":1837},"bitmap format",{"type":39,"value":1839}," and allows compression, so you can tell the image how much to save its volume. If you compress too much you get a ",{"type":33,"tag":54,"props":1841,"children":1842},{},[1843],{"type":39,"value":1844},"poor quality image",{"type":39,"value":1846},", but if the compression is too small the image can be ",{"type":33,"tag":54,"props":1848,"children":1849},{},[1850],{"type":39,"value":1851},"large in kb",{"type":39,"value":261},{"type":33,"tag":48,"props":1854,"children":1855},{},[1856],{"type":33,"tag":210,"props":1857,"children":1860},{"alt":1858,"src":1859,"title":1858},"Example of using image compression","/article/image-formats/compression_en.png",[],{"type":33,"tag":48,"props":1862,"children":1863},{},[1864,1866,1871],{"type":39,"value":1865},"In general, it is a good idea to choose an image quality with compression ",{"type":33,"tag":54,"props":1867,"children":1868},{},[1869],{"type":39,"value":1870},"between 70-90%",{"type":39,"value":261},{"type":33,"tag":48,"props":1873,"children":1874},{},[1875],{"type":33,"tag":54,"props":1876,"children":1877},{},[1878],{"type":39,"value":1879},"Benefits",{"type":33,"tag":48,"props":1881,"children":1882},{},[1883,1885,1890],{"type":39,"value":1884},"This format is suitable for storing bitmaps where we don't mind compression (photos) so much, its advantage is its ",{"type":33,"tag":54,"props":1886,"children":1887},{},[1888],{"type":39,"value":1889},"relatively small size",{"type":39,"value":261},{"type":33,"tag":48,"props":1892,"children":1893},{},[1894],{"type":33,"tag":54,"props":1895,"children":1896},{},[1897],{"type":39,"value":1898},"Disadvantages",{"type":33,"tag":48,"props":1900,"children":1901},{},[1902,1904,1909],{"type":39,"value":1903},"JPG is not a format where we can expect sharp edges between transitions of two surfaces, ",{"type":33,"tag":54,"props":1905,"children":1906},{},[1907],{"type":39,"value":1908},"not suitable for storing logos, gradients and the like",{"type":39,"value":1910},".\r\nIt does not support transparency of images.",{"type":33,"tag":1601,"props":1912,"children":1913},{},[],{"type":33,"tag":41,"props":1915,"children":1917},{"id":1916},"png",[1918],{"type":39,"value":1919},"PNG",{"type":33,"tag":48,"props":1921,"children":1922},{},[1923,1925,1930,1932,1937],{"type":39,"value":1924},"Is a format that uses ",{"type":33,"tag":54,"props":1926,"children":1927},{},[1928],{"type":39,"value":1929},"error-free compression with no data loss",{"type":39,"value":1931},", which means that no information is lost during compression. PNG images retain more detail and are generally of high quality. PNG images ",{"type":33,"tag":54,"props":1933,"children":1934},{},[1935],{"type":39,"value":1936},"allow transparency",{"type":39,"value":1938},". However, it is still a bitmap and the image is therefore composed of individual pixels.",{"type":33,"tag":48,"props":1940,"children":1941},{},[1942],{"type":33,"tag":210,"props":1943,"children":1946},{"alt":1944,"src":1945,"title":1944},"PNG image example","/article/image-formats/png_example.png",[],{"type":33,"tag":48,"props":1948,"children":1949},{},[1950],{"type":33,"tag":54,"props":1951,"children":1952},{},[1953],{"type":39,"value":1879},{"type":33,"tag":48,"props":1955,"children":1956},{},[1957,1959,1964,1966,1971],{"type":39,"value":1958},"We can use PNGs ",{"type":33,"tag":54,"props":1960,"children":1961},{},[1962],{"type":39,"value":1963},"for logos, icons and various graphics",{"type":39,"value":1965}," where we take advantage of the transparency and quality of the image, but keep in mind that we are limited by quality due to the pixels in the image. Where it makes sense, let's use SVG format rather than PNG for logos and icons or simple graphics. The advantage of PNG is that it ",{"type":33,"tag":54,"props":1967,"children":1968},{},[1969],{"type":39,"value":1970},"doesn't mind transitions and sharp edged areas",{"type":39,"value":261},{"type":33,"tag":48,"props":1973,"children":1974},{},[1975],{"type":33,"tag":54,"props":1976,"children":1977},{},[1978],{"type":39,"value":1898},{"type":33,"tag":48,"props":1980,"children":1981},{},[1982,1984,1989],{"type":39,"value":1983},"PNG tends to be ",{"type":33,"tag":54,"props":1985,"children":1986},{},[1987],{"type":39,"value":1988},"bulky and data intensive",{"type":39,"value":1990}," compared to other formats.",{"type":33,"tag":1601,"props":1992,"children":1993},{},[],{"type":33,"tag":774,"props":1995,"children":1997},{"id":1996},"svg",[1998],{"type":39,"value":1999},"SVG",{"type":33,"tag":48,"props":2001,"children":2002},{},[2003,2005,2010],{"type":39,"value":2004},"This is a ",{"type":33,"tag":54,"props":2006,"children":2007},{},[2008],{"type":39,"value":2009},"vector format",{"type":39,"value":2011},", which means that images in this format are created using mathematical paths and shapes instead of pixels, as we discussed above in the differences between Bitmap and Vector.",{"type":33,"tag":48,"props":2013,"children":2014},{},[2015],{"type":33,"tag":210,"props":2016,"children":2019},{"alt":2017,"src":2018,"title":2017},"SVG image example","/article/image-formats/svg_example.png",[],{"type":33,"tag":48,"props":2021,"children":2022},{},[2023],{"type":33,"tag":54,"props":2024,"children":2025},{},[2026],{"type":39,"value":2027},"Advantages",{"type":33,"tag":48,"props":2029,"children":2030},{},[2031,2033,2038],{"type":39,"value":2032},"SVG images are fully ",{"type":33,"tag":54,"props":2034,"children":2035},{},[2036],{"type":39,"value":2037},"scalable without loss of quality",{"type":39,"value":2039},". This means you can enlarge or reduce an SVG image to any size without blurring or distortion.",{"type":33,"tag":48,"props":2041,"children":2042},{},[2043,2045,2050,2052,2057,2059,2064,2066,2071],{"type":39,"value":2044},"The files are usually ",{"type":33,"tag":54,"props":2046,"children":2047},{},[2048],{"type":39,"value":2049},"very small",{"type":39,"value":2051},", which means faster loading web pages.\r\nSVG ",{"type":33,"tag":54,"props":2053,"children":2054},{},[2055],{"type":39,"value":2056},"supports transparency",{"type":39,"value":2058}," and allows you to create images with transparent backgrounds, which is useful for a variety of design applications.\r\nThey are ",{"type":33,"tag":54,"props":2060,"children":2061},{},[2062],{"type":39,"value":2063},"text files",{"type":39,"value":2065}," and can also be embedded directly into code.\r\n",{"type":33,"tag":54,"props":2067,"children":2068},{},[2069],{"type":39,"value":2070},"Very suitable for logos and icons",{"type":39,"value":261},{"type":33,"tag":48,"props":2073,"children":2074},{},[2075],{"type":33,"tag":54,"props":2076,"children":2077},{},[2078],{"type":39,"value":1898},{"type":33,"tag":48,"props":2080,"children":2081},{},[2082,2084,2089],{"type":39,"value":2083},"Creating complex SVG images can be tricky, especially for beginners.\r\nSVG is ",{"type":33,"tag":54,"props":2085,"children":2086},{},[2087],{"type":39,"value":2088},"not suitable for storing photos",{"type":39,"value":2090}," or images with many color gradients, as it is based on shapes and paths, which is not effective for photographic details.",{"type":33,"tag":1601,"props":2092,"children":2093},{},[],{"type":33,"tag":774,"props":2095,"children":2097},{"id":2096},"webp",[2098],{"type":39,"value":2099},"WebP",{"type":33,"tag":48,"props":2101,"children":2102},{},[2103,2105,2110,2112,2117,2119,2124],{"type":39,"value":2104},"WebP is a modern format designed ",{"type":33,"tag":54,"props":2106,"children":2107},{},[2108],{"type":39,"value":2109},"for image compression",{"type":39,"value":2111},", developed by Google. Its main goal is to provide high quality images while keeping the data volume as low as possible. WebP ",{"type":33,"tag":54,"props":2113,"children":2114},{},[2115],{"type":39,"value":2116},"supports both lossy compression",{"type":39,"value":2118}," and lossless compression. It is actually a kind of universal format that combines ",{"type":33,"tag":54,"props":2120,"children":2121},{},[2122],{"type":39,"value":2123},"the best features of JPEG, PNG and GIF",{"type":39,"value":261},{"type":33,"tag":48,"props":2126,"children":2127},{},[2128],{"type":33,"tag":54,"props":2129,"children":2130},{},[2131],{"type":39,"value":1879},{"type":33,"tag":48,"props":2133,"children":2134},{},[2135,2137,2141],{"type":39,"value":2136},"This format usually provides better compression than formats like JPEG and PNG, resulting in reduced file sizes. Like PNG, WebP ",{"type":33,"tag":54,"props":2138,"children":2139},{},[2140],{"type":39,"value":2056},{"type":39,"value":2142},", which means it can be used for images with transparent backgrounds, and it also supports animations like the GIF format.",{"type":33,"tag":48,"props":2144,"children":2145},{},[2146],{"type":33,"tag":54,"props":2147,"children":2148},{},[2149],{"type":39,"value":1898},{"type":33,"tag":48,"props":2151,"children":2152},{},[2153,2155,2160,2162,2167],{"type":39,"value":2154},"Although WebP is becoming more widely used, some older browsers and platforms ",{"type":33,"tag":54,"props":2156,"children":2157},{},[2158],{"type":39,"value":2159},"may not have full support",{"type":39,"value":2161}," for the format. WebP is ideal for web images, but may not be optimal for all purposes, especially if you need to preserve ",{"type":33,"tag":54,"props":2163,"children":2164},{},[2165],{"type":39,"value":2166},"high quality detail",{"type":39,"value":261},{"type":33,"tag":48,"props":2169,"children":2170},{},[2171],{"type":33,"tag":210,"props":2172,"children":2175},{"alt":2173,"src":2174,"title":2173},"Comparison of JPG and WEBP formats","/article/image-formats/jpg_vs_webp.png",[],{"type":33,"tag":48,"props":2177,"children":2178},{},[2179,2181,2188],{"type":39,"value":2180},"Below is a table of WEBP format support by each browser version. You can learn more at ",{"type":33,"tag":101,"props":2182,"children":2185},{"href":2183,"rel":2184,"target":106},"https://caniuse.com/?search=webp",[105],[2186],{"type":39,"value":2187},"caniuse.com",{"type":39,"value":261},{"type":33,"tag":48,"props":2190,"children":2191},{},[2192],{"type":33,"tag":210,"props":2193,"children":2196},{"alt":2194,"src":2195,"title":2194},"WEBP format support table by browser","/article/image-formats/caniuse.jpg",[],{"type":33,"tag":1601,"props":2198,"children":2199},{},[],{"type":33,"tag":41,"props":2201,"children":2203},{"id":2202},"comparison",[2204],{"type":39,"value":2205},"Comparison",{"type":33,"tag":48,"props":2207,"children":2208},{},[2209],{"type":39,"value":2210},"Below is a table comparing different image formats and their usage.",{"type":33,"tag":2212,"props":2213,"children":2214},"table",{},[2215,2260],{"type":33,"tag":2216,"props":2217,"children":2218},"thead",{},[2219],{"type":33,"tag":2220,"props":2221,"children":2222},"tr",{},[2223,2230,2235,2240,2245,2250,2255],{"type":33,"tag":2224,"props":2225,"children":2227},"th",{"align":2226},"left",[2228],{"type":39,"value":2229},"Formats",{"type":33,"tag":2224,"props":2231,"children":2232},{"align":2226},[2233],{"type":39,"value":2234},"Photos",{"type":33,"tag":2224,"props":2236,"children":2237},{"align":2226},[2238],{"type":39,"value":2239},"Logos",{"type":33,"tag":2224,"props":2241,"children":2242},{"align":2226},[2243],{"type":39,"value":2244},"Icons",{"type":33,"tag":2224,"props":2246,"children":2247},{"align":2226},[2248],{"type":39,"value":2249},"Infographics",{"type":33,"tag":2224,"props":2251,"children":2252},{"align":2226},[2253],{"type":39,"value":2254},"Illustrations",{"type":33,"tag":2224,"props":2256,"children":2257},{"align":2226},[2258],{"type":39,"value":2259},"Animations",{"type":33,"tag":2261,"props":2262,"children":2263},"tbody",{},[2264,2299,2331,2363,2394,2426,2458,2489,2521],{"type":33,"tag":2220,"props":2265,"children":2266},{},[2267,2272,2277,2282,2286,2291,2295],{"type":33,"tag":2268,"props":2269,"children":2270},"td",{"align":2226},[2271],{"type":39,"value":1820},{"type":33,"tag":2268,"props":2273,"children":2274},{"align":2226},[2275],{"type":39,"value":2276},"YES",{"type":33,"tag":2268,"props":2278,"children":2279},{"align":2226},[2280],{"type":39,"value":2281},"NO",{"type":33,"tag":2268,"props":2283,"children":2284},{"align":2226},[2285],{"type":39,"value":2281},{"type":33,"tag":2268,"props":2287,"children":2288},{"align":2226},[2289],{"type":39,"value":2290},"Rather not",{"type":33,"tag":2268,"props":2292,"children":2293},{"align":2226},[2294],{"type":39,"value":2281},{"type":33,"tag":2268,"props":2296,"children":2297},{"align":2226},[2298],{"type":39,"value":2281},{"type":33,"tag":2220,"props":2300,"children":2301},{},[2302,2306,2310,2315,2319,2323,2327],{"type":33,"tag":2268,"props":2303,"children":2304},{"align":2226},[2305],{"type":39,"value":1919},{"type":33,"tag":2268,"props":2307,"children":2308},{"align":2226},[2309],{"type":39,"value":2281},{"type":33,"tag":2268,"props":2311,"children":2312},{"align":2226},[2313],{"type":39,"value":2314},"May be",{"type":33,"tag":2268,"props":2316,"children":2317},{"align":2226},[2318],{"type":39,"value":2314},{"type":33,"tag":2268,"props":2320,"children":2321},{"align":2226},[2322],{"type":39,"value":2290},{"type":33,"tag":2268,"props":2324,"children":2325},{"align":2226},[2326],{"type":39,"value":2281},{"type":33,"tag":2268,"props":2328,"children":2329},{"align":2226},[2330],{"type":39,"value":2281},{"type":33,"tag":2220,"props":2332,"children":2333},{},[2334,2339,2343,2347,2351,2355,2359],{"type":33,"tag":2268,"props":2335,"children":2336},{"align":2226},[2337],{"type":39,"value":2338},"GIF",{"type":33,"tag":2268,"props":2340,"children":2341},{"align":2226},[2342],{"type":39,"value":2281},{"type":33,"tag":2268,"props":2344,"children":2345},{"align":2226},[2346],{"type":39,"value":2281},{"type":33,"tag":2268,"props":2348,"children":2349},{"align":2226},[2350],{"type":39,"value":2281},{"type":33,"tag":2268,"props":2352,"children":2353},{"align":2226},[2354],{"type":39,"value":2281},{"type":33,"tag":2268,"props":2356,"children":2357},{"align":2226},[2358],{"type":39,"value":2281},{"type":33,"tag":2268,"props":2360,"children":2361},{"align":2226},[2362],{"type":39,"value":2314},{"type":33,"tag":2220,"props":2364,"children":2365},{},[2366,2370,2374,2378,2382,2386,2390],{"type":33,"tag":2268,"props":2367,"children":2368},{"align":2226},[2369],{"type":39,"value":1999},{"type":33,"tag":2268,"props":2371,"children":2372},{"align":2226},[2373],{"type":39,"value":2281},{"type":33,"tag":2268,"props":2375,"children":2376},{"align":2226},[2377],{"type":39,"value":2276},{"type":33,"tag":2268,"props":2379,"children":2380},{"align":2226},[2381],{"type":39,"value":2276},{"type":33,"tag":2268,"props":2383,"children":2384},{"align":2226},[2385],{"type":39,"value":2276},{"type":33,"tag":2268,"props":2387,"children":2388},{"align":2226},[2389],{"type":39,"value":2276},{"type":33,"tag":2268,"props":2391,"children":2392},{"align":2226},[2393],{"type":39,"value":2314},{"type":33,"tag":2220,"props":2395,"children":2396},{},[2397,2402,2406,2410,2414,2418,2422],{"type":33,"tag":2268,"props":2398,"children":2399},{"align":2226},[2400],{"type":39,"value":2401},"BMP",{"type":33,"tag":2268,"props":2403,"children":2404},{"align":2226},[2405],{"type":39,"value":2281},{"type":33,"tag":2268,"props":2407,"children":2408},{"align":2226},[2409],{"type":39,"value":2281},{"type":33,"tag":2268,"props":2411,"children":2412},{"align":2226},[2413],{"type":39,"value":2281},{"type":33,"tag":2268,"props":2415,"children":2416},{"align":2226},[2417],{"type":39,"value":2281},{"type":33,"tag":2268,"props":2419,"children":2420},{"align":2226},[2421],{"type":39,"value":2281},{"type":33,"tag":2268,"props":2423,"children":2424},{"align":2226},[2425],{"type":39,"value":2281},{"type":33,"tag":2220,"props":2427,"children":2428},{},[2429,2434,2438,2442,2446,2450,2454],{"type":33,"tag":2268,"props":2430,"children":2431},{"align":2226},[2432],{"type":39,"value":2433},"TIFF",{"type":33,"tag":2268,"props":2435,"children":2436},{"align":2226},[2437],{"type":39,"value":2281},{"type":33,"tag":2268,"props":2439,"children":2440},{"align":2226},[2441],{"type":39,"value":2281},{"type":33,"tag":2268,"props":2443,"children":2444},{"align":2226},[2445],{"type":39,"value":2281},{"type":33,"tag":2268,"props":2447,"children":2448},{"align":2226},[2449],{"type":39,"value":2281},{"type":33,"tag":2268,"props":2451,"children":2452},{"align":2226},[2453],{"type":39,"value":2281},{"type":33,"tag":2268,"props":2455,"children":2456},{"align":2226},[2457],{"type":39,"value":2281},{"type":33,"tag":2220,"props":2459,"children":2460},{},[2461,2465,2469,2473,2477,2481,2485],{"type":33,"tag":2268,"props":2462,"children":2463},{"align":2226},[2464],{"type":39,"value":2099},{"type":33,"tag":2268,"props":2466,"children":2467},{"align":2226},[2468],{"type":39,"value":2276},{"type":33,"tag":2268,"props":2470,"children":2471},{"align":2226},[2472],{"type":39,"value":2314},{"type":33,"tag":2268,"props":2474,"children":2475},{"align":2226},[2476],{"type":39,"value":2314},{"type":33,"tag":2268,"props":2478,"children":2479},{"align":2226},[2480],{"type":39,"value":2276},{"type":33,"tag":2268,"props":2482,"children":2483},{"align":2226},[2484],{"type":39,"value":2314},{"type":33,"tag":2268,"props":2486,"children":2487},{"align":2226},[2488],{"type":39,"value":2314},{"type":33,"tag":2220,"props":2490,"children":2491},{},[2492,2497,2501,2505,2509,2513,2517],{"type":33,"tag":2268,"props":2493,"children":2494},{"align":2226},[2495],{"type":39,"value":2496},"ICO",{"type":33,"tag":2268,"props":2498,"children":2499},{"align":2226},[2500],{"type":39,"value":2281},{"type":33,"tag":2268,"props":2502,"children":2503},{"align":2226},[2504],{"type":39,"value":2281},{"type":33,"tag":2268,"props":2506,"children":2507},{"align":2226},[2508],{"type":39,"value":2281},{"type":33,"tag":2268,"props":2510,"children":2511},{"align":2226},[2512],{"type":39,"value":2281},{"type":33,"tag":2268,"props":2514,"children":2515},{"align":2226},[2516],{"type":39,"value":2281},{"type":33,"tag":2268,"props":2518,"children":2519},{"align":2226},[2520],{"type":39,"value":2281},{"type":33,"tag":2220,"props":2522,"children":2523},{},[2524,2529,2533,2537,2541,2545,2549],{"type":33,"tag":2268,"props":2525,"children":2526},{"align":2226},[2527],{"type":39,"value":2528},"EPS",{"type":33,"tag":2268,"props":2530,"children":2531},{"align":2226},[2532],{"type":39,"value":2281},{"type":33,"tag":2268,"props":2534,"children":2535},{"align":2226},[2536],{"type":39,"value":2281},{"type":33,"tag":2268,"props":2538,"children":2539},{"align":2226},[2540],{"type":39,"value":2281},{"type":33,"tag":2268,"props":2542,"children":2543},{"align":2226},[2544],{"type":39,"value":2281},{"type":33,"tag":2268,"props":2546,"children":2547},{"align":2226},[2548],{"type":39,"value":2281},{"type":33,"tag":2268,"props":2550,"children":2551},{"align":2226},[2552],{"type":39,"value":2281},{"type":33,"tag":41,"props":2554,"children":2555},{"id":821},[2556],{"type":39,"value":824},{"type":33,"tag":48,"props":2558,"children":2559},{},[2560,2562,2567,2569,2574],{"type":39,"value":2561},"To conclude this article, proper image manipulation on web pages is a ",{"type":33,"tag":54,"props":2563,"children":2564},{},[2565],{"type":39,"value":2566},"key element for optimizing loading speed",{"type":39,"value":2568}," and overall user experience. Choosing the right image format plays an ",{"type":33,"tag":54,"props":2570,"children":2571},{},[2572],{"type":39,"value":2573},"important role in striking a balance",{"type":39,"value":2575}," between quality and file size.",{"type":33,"tag":48,"props":2577,"children":2578},{},[2579,2581,2586,2588,2593],{"type":39,"value":2580},"Experiment with image formats, always check the resulting quality after exporting the image and the file size. Try to have ",{"type":33,"tag":54,"props":2582,"children":2583},{},[2584],{"type":39,"value":2585},"logos in curves in vector, photos with ideal compression like JPEG or WEBP",{"type":39,"value":2587},". On the other hand, graphics that can't handle compression and can't be in curves should probably be in PNG. Finally, ",{"type":33,"tag":54,"props":2589,"children":2590},{},[2591],{"type":39,"value":2592},"animate the vector in SVG or GIF / WEBP bitmap",{"type":39,"value":261},{"type":33,"tag":48,"props":2595,"children":2596},{},[2597],{"type":39,"value":2598},"I hope you enjoyed this article and found it useful. You can give me any feedback in messages or on social media, below I summarize some links where you can continue your study.",{"type":33,"tag":41,"props":2600,"children":2601},{"id":851},[2602],{"type":39,"value":854},{"type":33,"tag":132,"props":2604,"children":2605},{},[2606,2616,2626,2637],{"type":33,"tag":136,"props":2607,"children":2608},{},[2609],{"type":33,"tag":101,"props":2610,"children":2613},{"href":2611,"rel":2612,":rel":105},"https://www.svgator.com",[105],[2614],{"type":39,"value":2615},"Svgator for SVG animation",{"type":33,"tag":136,"props":2617,"children":2618},{},[2619],{"type":33,"tag":101,"props":2620,"children":2623},{"href":2621,"rel":2622,":rel":105},"https://www.vzhurudolu.cz/prirucka/webp",[105],[2624],{"type":39,"value":2625},"About webp on Vzhurudol.cz",{"type":33,"tag":136,"props":2627,"children":2628},{},[2629],{"type":33,"tag":101,"props":2630,"children":2634},{"href":2631,"rel":2632,":rel":2633},"https://www.photopea.com",[105],"follow",[2635],{"type":39,"value":2636},"Online image editor",{"type":33,"tag":136,"props":2638,"children":2639},{},[2640],{"type":33,"tag":101,"props":2641,"children":2644},{"href":2642,"rel":2643,":rel":2633},"https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Image_types",[105],[2645],{"type":39,"value":2646},"Description of image formats on mozila.org",{"title":8,"searchDepth":919,"depth":919,"links":2648},[2649,2650,2653,2657,2658,2659],{"id":1731,"depth":919,"text":1734},{"id":1806,"depth":919,"text":1809,"children":2651},[2652],{"id":1817,"depth":931,"text":1820},{"id":1916,"depth":919,"text":1919,"children":2654},[2655,2656],{"id":1996,"depth":931,"text":1999},{"id":2096,"depth":931,"text":2099},{"id":2202,"depth":919,"text":2205},{"id":821,"depth":919,"text":824},{"id":851,"depth":919,"text":854},"content:knowledge:guide-to-the-world-of-web-image-formats.md","knowledge/guide-to-the-world-of-web-image-formats.md",[2663],{"_path":2664,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":2665,"description":2666,"author":11,"date":2667,"readingTime":2668,"level":2669,"image":2670,"tags":2671,"slugs":2675,"relatedArticles":2677,"body":2679,"_type":934,"_id":5093,"_source":936,"_file":5094,"_extension":938},"/knowledge/web-accessibility-guide","Web Accessibility Guide","Come and explore the world of accessible web development. We will show you the WCAG or WAI-ARIA standards along with sample applications and much more...","2024-02-28",20,"intermediate","/featured/web-accessiblity.jpg",[2672,2673,2674],"WCAG","WAIARIA","webaccessibility",{"en":1663,"cs":2676},"pruvodce-webove-pristupnosti",[2678,957,953],"how-to-set-up-a-cookie-bar-correctly",{"type":30,"children":2680,"toc":5061},[2681,2685,2691,2708,2717,2735,2747,2854,2860,2872,2878,2892,2902,3039,3053,3062,3070,3121,3127,3161,3169,3175,3180,3186,3218,3226,3240,3248,3259,3262,3268,3287,3302,3310,3321,3329,3340,3352,3363,3366,3372,3384,3389,3397,3408,3411,3417,3422,3428,3440,3448,3456,3518,3526,3581,3584,3590,3609,3621,3644,3652,3678,3687,3699,3804,3807,3813,3831,3838,3846,3856,3868,3879,3886,3895,3906,3917,3924,3933,3945,3952,3960,3972,3983,4009,4016,4025,4035,4046,4053,4062,4079,4090,4097,4106,4118,4129,4136,4145,4155,4166,4173,4182,4194,4205,4208,4214,4226,4238,4250,4253,4259,4285,4298,4307,4310,4316,4322,4341,4350,4358,4381,4388,4460,4466,4504,4518,4524,4529,4537,4581,4586,4592,4617,4623,4649,4658,4670,4676,4711,4719,4786,4793,4799,4805,4823,4831,4837,4849,4858,4863,4946,4952],{"type":33,"tag":34,"props":2682,"children":2683},{"id":1663},[2684],{"type":39,"value":2665},{"type":33,"tag":41,"props":2686,"children":2688},{"id":2687},"what-is-web-accessibility-and-who-does-it-serve",[2689],{"type":39,"value":2690},"What is web accessibility and who does it serve",{"type":33,"tag":48,"props":2692,"children":2693},{},[2694,2699,2701,2706],{"type":33,"tag":54,"props":2695,"children":2696},{},[2697],{"type":39,"value":2698},"Web accessibility",{"type":39,"value":2700}," is about creating and maintaining websites and applications that are accessible and usable ",{"type":33,"tag":54,"props":2702,"children":2703},{},[2704],{"type":39,"value":2705},"for as many users as possible",{"type":39,"value":2707},", including those with different types of disabilities.",{"type":33,"tag":48,"props":2709,"children":2710},{},[2711],{"type":33,"tag":210,"props":2712,"children":2716},{"alt":2713,"src":2714,"title":2713,"width":2715},"Web Accessibility","/article/web-accessiblity/web-accesibility.svg","420",[],{"type":33,"tag":48,"props":2718,"children":2719},{},[2720,2722,2727,2729,2734],{"type":39,"value":2721},"Involves the implementation of ",{"type":33,"tag":54,"props":2723,"children":2724},{},[2725],{"type":39,"value":2726},"technical, design and content features",{"type":39,"value":2728}," that enable people with visual, hearing, motor or cognitive disabilities to navigate, ",{"type":33,"tag":54,"props":2730,"children":2731},{},[2732],{"type":39,"value":2733},"understand and interact with web content",{"type":39,"value":261},{"type":33,"tag":48,"props":2736,"children":2737},{},[2738,2740,2745],{"type":39,"value":2739},"We could also describe ",{"type":33,"tag":54,"props":2741,"children":2742},{},[2743],{"type":39,"value":2744},"web accessibility",{"type":39,"value":2746}," as a set of guidelines, rules and procedures that, when followed, have a significant impact on the user experience and accessibility of a website for a wide range of users.",{"type":33,"tag":994,"props":2748,"children":2749},{},[2750,2756,2768],{"type":33,"tag":41,"props":2751,"children":2753},{"id":2752},"benefits-of-the-accessible-web",[2754],{"type":39,"value":2755},"Benefits of the accessible web",{"type":33,"tag":48,"props":2757,"children":2758},{},[2759,2761,2766],{"type":39,"value":2760},"The ",{"type":33,"tag":54,"props":2762,"children":2763},{},[2764],{"type":39,"value":2765},"Accessible Web",{"type":39,"value":2767}," offers a number of benefits not only for users with disabilities, but for all Internet users. The following are some of the biggest benefits:",{"type":33,"tag":132,"props":2769,"children":2770},{},[2771,2787,2804,2821,2838],{"type":33,"tag":136,"props":2772,"children":2773},{},[2774,2779,2781,2786],{"type":33,"tag":54,"props":2775,"children":2776},{},[2777],{"type":39,"value":2778},"Expanding the reach of the target audience",{"type":39,"value":2780}," - The accessible web increases the accessibility of content for users with visual, hearing, motor and cognitive impairments, meaning that the web can reach a ",{"type":33,"tag":54,"props":2782,"children":2783},{},[2784],{"type":39,"value":2785},"wider range of users",{"type":39,"value":261},{"type":33,"tag":136,"props":2788,"children":2789},{},[2790,2795,2797,2802],{"type":33,"tag":54,"props":2791,"children":2792},{},[2793],{"type":39,"value":2794},"Improved SEO",{"type":39,"value":2796}," - Websites with accessible and structured content are ",{"type":33,"tag":54,"props":2798,"children":2799},{},[2800],{"type":39,"value":2801},"ranked higher by search engines",{"type":39,"value":2803},", increasing their visibility and reach online and in search.",{"type":33,"tag":136,"props":2805,"children":2806},{},[2807,2812,2814,2819],{"type":33,"tag":54,"props":2808,"children":2809},{},[2810],{"type":39,"value":2811},"Improved usability and user satisfaction",{"type":39,"value":2813}," - An accessible website provides a better usability and user experience, which can lead to ",{"type":33,"tag":54,"props":2815,"children":2816},{},[2817],{"type":39,"value":2818},"higher conversion",{"type":39,"value":2820},", lower abandonment rates and greater user loyalty.",{"type":33,"tag":136,"props":2822,"children":2823},{},[2824,2829,2831,2836],{"type":33,"tag":54,"props":2825,"children":2826},{},[2827],{"type":39,"value":2828},"Compliance with legal and regulatory requirements",{"type":39,"value":2830}," - Web accessibility is a ",{"type":33,"tag":54,"props":2832,"children":2833},{},[2834],{"type":39,"value":2835},"legislative obligation",{"type":39,"value":2837}," for any website belonging to a government entity.",{"type":33,"tag":136,"props":2839,"children":2840},{},[2841,2846,2848,2853],{"type":33,"tag":54,"props":2842,"children":2843},{},[2844],{"type":39,"value":2845},"Clearer, easier-to-understand information",{"type":39,"value":2847}," - An accessible website emphasizes structured and well-described information (learn more later in the design and development process) which contributes to ",{"type":33,"tag":54,"props":2849,"children":2850},{},[2851],{"type":39,"value":2852},"easier navigation and use of the website",{"type":39,"value":261},{"type":33,"tag":41,"props":2855,"children":2857},{"id":2856},"what-are-wai-aria-and-wcag",[2858],{"type":39,"value":2859},"What are WAI-ARIA and WCAG",{"type":33,"tag":48,"props":2861,"children":2862},{},[2863,2865,2870],{"type":39,"value":2864},"Both are key standards in the field of web accessibility. They specify ",{"type":33,"tag":54,"props":2866,"children":2867},{},[2868],{"type":39,"value":2869},"best-practices in developing and maintaining websites",{"type":39,"value":2871}," with the utmost regard for usability and clarity.",{"type":33,"tag":41,"props":2873,"children":2875},{"id":2874},"wcag-22",[2876],{"type":39,"value":2877},"WCAG 2.2",{"type":33,"tag":48,"props":2879,"children":2880},{},[2881,2883,2890],{"type":39,"value":2882},"This is ",{"type":33,"tag":101,"props":2884,"children":2887},{"href":2885,"rel":2886,"target":106},"https://www.w3.org/WAI/standards-guidelines/wcag/",[105],[2888],{"type":39,"value":2889},"a set of recommendations, guidelines for creating",{"type":39,"value":2891}," accessible web pages.",{"type":33,"tag":48,"props":2893,"children":2894},{},[2895,2897],{"type":39,"value":2896},"It ",{"type":33,"tag":54,"props":2898,"children":2899},{},[2900],{"type":39,"value":2901},"generally puts into practice the following four principles:",{"type":33,"tag":990,"props":2903,"children":2904},{},[2905,2940,2969,3004],{"type":33,"tag":994,"props":2906,"children":2907},{},[2908,2916,2922],{"type":33,"tag":48,"props":2909,"children":2910},{},[2911],{"type":33,"tag":210,"props":2912,"children":2915},{"alt":2913,"src":2914,"title":2913},"Visibility","/article/web-accessiblity/visibility.svg",[],{"type":33,"tag":774,"props":2917,"children":2919},{"id":2918},"_1-perceptibility-️",[2920],{"type":39,"value":2921},"1. Perceptibility 👁️",{"type":33,"tag":48,"props":2923,"children":2924},{},[2925,2927,2932,2934,2939],{"type":39,"value":2926},"Information and user interface components must be ",{"type":33,"tag":54,"props":2928,"children":2929},{},[2930],{"type":39,"value":2931},"presentable to users in a way they can perceive",{"type":39,"value":2933},". This means that users must be able to perceive the presented information ",{"type":33,"tag":54,"props":2935,"children":2936},{},[2937],{"type":39,"value":2938},"(it cannot be invisible to all their senses)",{"type":39,"value":261},{"type":33,"tag":994,"props":2941,"children":2942},{},[2943,2951,2957],{"type":33,"tag":48,"props":2944,"children":2945},{},[2946],{"type":33,"tag":210,"props":2947,"children":2950},{"alt":2948,"src":2949,"title":2948},"Controllability","/article/web-accessiblity/control.svg",[],{"type":33,"tag":774,"props":2952,"children":2954},{"id":2953},"_2-controllability-️",[2955],{"type":39,"value":2956},"2. Controllability 🕹️",{"type":33,"tag":48,"props":2958,"children":2959},{},[2960,2962,2967],{"type":39,"value":2961},"UI and navigation components must be controllable. This means that users ",{"type":33,"tag":54,"props":2963,"children":2964},{},[2965],{"type":39,"value":2966},"must be able to control",{"type":39,"value":2968}," the interface\r\n(the interface must not require interaction that the user cannot perform).",{"type":33,"tag":994,"props":2970,"children":2971},{},[2972,2980,2986],{"type":33,"tag":48,"props":2973,"children":2974},{},[2975],{"type":33,"tag":210,"props":2976,"children":2979},{"alt":2977,"src":2978,"title":2977},"Readability","/article/web-accessiblity/readable.svg",[],{"type":33,"tag":774,"props":2981,"children":2983},{"id":2982},"_3-intelligibility",[2984],{"type":39,"value":2985},"3. Intelligibility 😎",{"type":33,"tag":48,"props":2987,"children":2988},{},[2989,2991,2996,2998,3003],{"type":39,"value":2990},"Information and user interface controls ",{"type":33,"tag":54,"props":2992,"children":2993},{},[2994],{"type":39,"value":2995},"must be understandable",{"type":39,"value":2997},". This means that users must be able to understand the information and UI controls ",{"type":33,"tag":54,"props":2999,"children":3000},{},[3001],{"type":39,"value":3002},"(the content or controls must not be beyond their comprehension)",{"type":39,"value":261},{"type":33,"tag":994,"props":3005,"children":3006},{},[3007,3015,3021],{"type":33,"tag":48,"props":3008,"children":3009},{},[3010],{"type":33,"tag":210,"props":3011,"children":3014},{"alt":3012,"src":3013,"title":3012},"Robustness","/article/web-accessiblity/robust.svg",[],{"type":33,"tag":774,"props":3016,"children":3018},{"id":3017},"_4-robustness",[3019],{"type":39,"value":3020},"4. Robustness 🧱",{"type":33,"tag":48,"props":3022,"children":3023},{},[3024,3026,3031,3033,3038],{"type":39,"value":3025},"Content must be ",{"type":33,"tag":54,"props":3027,"children":3028},{},[3029],{"type":39,"value":3030},"sufficiently robust",{"type":39,"value":3032}," to be reliably interpreted by a wide range of user clients/devices, including assistive technologies. This means that users must be ",{"type":33,"tag":54,"props":3034,"children":3035},{},[3036],{"type":39,"value":3037},"able to access content as technology evolves",{"type":39,"value":261},{"type":33,"tag":48,"props":3040,"children":3041},{},[3042,3044,3051],{"type":39,"value":3043},"(",{"type":33,"tag":101,"props":3045,"children":3048},{"href":3046,"rel":3047},"https://www.w3.org/WAI/WCAG22/Understanding/intro#understanding-the-four-principles-of-accessibility",[105],[3049],{"type":39,"value":3050},"Source W3",{"type":39,"value":3052},")",{"type":33,"tag":48,"props":3054,"children":3055},{},[3056],{"type":33,"tag":101,"props":3057,"children":3059},{"href":3058},"#design-and-development-of-accessible-web",[3060],{"type":39,"value":3061},"We'll demonstrate these principles in practice below",{"type":33,"tag":48,"props":3063,"children":3064},{},[3065],{"type":33,"tag":54,"props":3066,"children":3067},{},[3068],{"type":39,"value":3069},"WCAG escalates to three levels of optimization:",{"type":33,"tag":132,"props":3071,"children":3072},{},[3073,3089,3105],{"type":33,"tag":136,"props":3074,"children":3075},{},[3076,3081,3083,3088],{"type":33,"tag":54,"props":3077,"children":3078},{},[3079],{"type":39,"value":3080},"Level A",{"type":39,"value":3082}," 🥉 is the minimum level of optimization. It aims to ensure that web content is ",{"type":33,"tag":54,"props":3084,"children":3085},{},[3086],{"type":39,"value":3087},"accessible to most users with disabilities",{"type":39,"value":261},{"type":33,"tag":136,"props":3090,"children":3091},{},[3092,3097,3099,3104],{"type":33,"tag":54,"props":3093,"children":3094},{},[3095],{"type":39,"value":3096},"Level AA",{"type":39,"value":3098}," 🥈 is a higher level of optimization than Level A. It is designed to ensure that web content is accessible to ",{"type":33,"tag":54,"props":3100,"children":3101},{},[3102],{"type":39,"value":3103},"a wider range of users with disabilities, including users with more severe disabilities",{"type":39,"value":261},{"type":33,"tag":136,"props":3106,"children":3107},{},[3108,3113,3115,3120],{"type":33,"tag":54,"props":3109,"children":3110},{},[3111],{"type":39,"value":3112},"Level AAA",{"type":39,"value":3114}," 🥇 is the highest level of optimization. It aims to ensure that the content of the site is accessible to ",{"type":33,"tag":54,"props":3116,"children":3117},{},[3118],{"type":39,"value":3119},"all users regardless of disability",{"type":39,"value":261},{"type":33,"tag":41,"props":3122,"children":3124},{"id":3123},"wai-aria",[3125],{"type":39,"value":3126},"WAI-ARIA",{"type":33,"tag":48,"props":3128,"children":3129},{},[3130,3131,3136,3138,3145,3147,3152,3154,3159],{"type":39,"value":2760},{"type":33,"tag":54,"props":3132,"children":3133},{},[3134],{"type":39,"value":3135},"Web Accessibility Initiative - Accessible Rich Internet Applications",{"type":39,"value":3137}," (WAI-ARIA) is a technical specification developed by the ",{"type":33,"tag":101,"props":3139,"children":3142},{"href":3140,"rel":3141},"https://www.w3.org",[105],[3143],{"type":39,"value":3144},"W3C",{"type":39,"value":3146},", it is a set of attributes and properties that allow developers to ",{"type":33,"tag":54,"props":3148,"children":3149},{},[3150],{"type":39,"value":3151},"tag significant user interface elements",{"type":39,"value":3153}," and provide sufficient information about their function, roles and relationships. This can help assistive technologies such as screen readers to ",{"type":33,"tag":54,"props":3155,"children":3156},{},[3157],{"type":39,"value":3158},"better interpret and display content",{"type":39,"value":3160}," at the cost of relatively little effort.",{"type":33,"tag":48,"props":3162,"children":3163},{},[3164],{"type":33,"tag":210,"props":3165,"children":3168},{"alt":3166,"src":3167,"title":3166,"width":1727},"ARIA accessibility meme","/article/web-accessiblity/aria-meme.png",[],{"type":33,"tag":41,"props":3170,"children":3172},{"id":3171},"accessible-web-design-and-development",[3173],{"type":39,"value":3174},"Accessible web design and development",{"type":33,"tag":48,"props":3176,"children":3177},{},[3178],{"type":39,"value":3179},"In the following sections, we will discuss the most important rules for developing an accessible website, with an example of implementation and use for each.",{"type":33,"tag":774,"props":3181,"children":3183},{"id":3182},"headings-h1-h6",[3184],{"type":39,"value":3185},"Headings H1-H6",{"type":33,"tag":48,"props":3187,"children":3188},{},[3189,3191,3196,3198,3203,3205,3210,3212,3217],{"type":39,"value":3190},"Proper use of a hierarchy of headings from ",{"type":33,"tag":140,"props":3192,"children":3193},{},[3194],{"type":39,"value":3195},"\u003CH1>",{"type":39,"value":3197}," to ",{"type":33,"tag":140,"props":3199,"children":3200},{},[3201],{"type":39,"value":3202},"\u003CH6>",{"type":39,"value":3204}," helps users and ",{"type":33,"tag":54,"props":3206,"children":3207},{},[3208],{"type":39,"value":3209},"reduces confusion when navigating the site",{"type":39,"value":3211},". This helps to better define the content structure and importance of each section of the page.\r\nThis rule also helps indexing by search bots (e.g. google bot) and ",{"type":33,"tag":54,"props":3213,"children":3214},{},[3215],{"type":39,"value":3216},"helps to improve SEO",{"type":39,"value":261},{"type":33,"tag":48,"props":3219,"children":3220},{},[3221],{"type":33,"tag":54,"props":3222,"children":3223},{},[3224],{"type":39,"value":3225},"Correct heading hierarchy:",{"type":33,"tag":3227,"props":3228,"children":3231},"code",{"code":3229,"language":20,"meta":3230},"\u003Ch1>Page name\u003C/h1>\r\n\u003Ch2>Section title\u003C/h2>\r\n\u003Ch2>Next section title\u003C/h2>\r\n\u003Ch3>Subsection title\u003Ch3>\r\n\u003Ch4>Fourth level heading\u003C/h4>\r\n\u003Ch3>Subsection heading\u003C/h3>\r\n\u003Ch2>Section heading\u003C/h2>\n",null,[3232],{"type":33,"tag":3233,"props":3234,"children":3235},"pre",{},[3236],{"type":33,"tag":3227,"props":3237,"children":3238},{"__ignoreMap":8},[3239],{"type":39,"value":3229},{"type":33,"tag":48,"props":3241,"children":3242},{},[3243],{"type":33,"tag":54,"props":3244,"children":3245},{},[3246],{"type":39,"value":3247},"Current heading hierarchy:",{"type":33,"tag":3227,"props":3249,"children":3251},{"code":3250,"language":20,"meta":3230},"\u003Ch1>Page title\u003C/h1>\r\n\u003Ch5>Level 5 heading\u003C/h5> \u003C!-- Incorrect use of heading -->\r\n\u003Ch2>Next section heading\u003C/h2>\r\n\u003Ch1>Next page title\u003Ch1> \u003C!-- Should be only one H1 per page -->\r\n\u003Ch4>Fourth level heading\u003C/h4> \u003C!-- Incorrect use of heading -->\r\n\u003Ch3>Subsection heading\u003C/h3>\r\n\u003Ch2>Section heading\u003C/h2>\n",[3252],{"type":33,"tag":3233,"props":3253,"children":3254},{},[3255],{"type":33,"tag":3227,"props":3256,"children":3257},{"__ignoreMap":8},[3258],{"type":39,"value":3250},{"type":33,"tag":1601,"props":3260,"children":3261},{},[],{"type":33,"tag":774,"props":3263,"children":3265},{"id":3264},"alternative-texts-for-media",[3266],{"type":39,"value":3267},"Alternative texts for media",{"type":33,"tag":48,"props":3269,"children":3270},{},[3271,3273,3279,3281,3286],{"type":39,"value":3272},"Every image on the web should have ",{"type":33,"tag":101,"props":3274,"children":3276},{"href":3275},"/knowledge/7-most-common-web-developer-mistakes#missing-image-alt-attribute",[3277],{"type":39,"value":3278},"alternative text",{"type":39,"value":3280}," that describes its content or purpose, which ",{"type":33,"tag":54,"props":3282,"children":3283},{},[3284],{"type":39,"value":3285},"allows users with visual impairments to understand the content",{"type":39,"value":261},{"type":33,"tag":48,"props":3288,"children":3289},{},[3290],{"type":33,"tag":3291,"props":3292,"children":3293},"em",{},[3294,3296,3301],{"type":39,"value":3295},"This rule also helps indexing by search bots (e.g. google bot) and ",{"type":33,"tag":54,"props":3297,"children":3298},{},[3299],{"type":39,"value":3300},"helps improve SEO",{"type":39,"value":261},{"type":33,"tag":48,"props":3303,"children":3304},{},[3305],{"type":33,"tag":54,"props":3306,"children":3307},{},[3308],{"type":39,"value":3309},"Properly described image:",{"type":33,"tag":3227,"props":3311,"children":3313},{"code":3312,"language":20,"meta":3230},"\u003Cimg src=\"...\" alt=\"Implementation process diagram\">\n",[3314],{"type":33,"tag":3233,"props":3315,"children":3316},{},[3317],{"type":33,"tag":3227,"props":3318,"children":3319},{"__ignoreMap":8},[3320],{"type":39,"value":3312},{"type":33,"tag":48,"props":3322,"children":3323},{},[3324],{"type":33,"tag":54,"props":3325,"children":3326},{},[3327],{"type":39,"value":3328},"Described and misdescribed picture",{"type":33,"tag":3227,"props":3330,"children":3332},{"code":3331,"language":20,"meta":3230},"\u003Cimg src=\"...\">\r\n\u003Cimg src=\"...\" alt=\"IMG_20240101\">\n",[3333],{"type":33,"tag":3233,"props":3334,"children":3335},{},[3336],{"type":33,"tag":3227,"props":3337,"children":3338},{"__ignoreMap":8},[3339],{"type":39,"value":3331},{"type":33,"tag":48,"props":3341,"children":3342},{},[3343,3345,3350],{"type":39,"value":3344},"If this is an image that ",{"type":33,"tag":54,"props":3346,"children":3347},{},[3348],{"type":39,"value":3349},"contains only web graphics",{"type":39,"value":3351}," then we should insert an empty alt and a role attribute with the value presentation:",{"type":33,"tag":3227,"props":3353,"children":3355},{"code":3354,"language":20,"meta":3230},"\u003Cimg src=\"...\" alt=\"\" role=\"presentation\">\n",[3356],{"type":33,"tag":3233,"props":3357,"children":3358},{},[3359],{"type":33,"tag":3227,"props":3360,"children":3361},{"__ignoreMap":8},[3362],{"type":39,"value":3354},{"type":33,"tag":1601,"props":3364,"children":3365},{},[],{"type":33,"tag":774,"props":3367,"children":3369},{"id":3368},"meta-labels",[3370],{"type":39,"value":3371},"Meta labels",{"type":33,"tag":48,"props":3373,"children":3374},{},[3375,3377,3382],{"type":39,"value":3376},"The \"description\" meta tag contains a brief summary of the page content that search engines and other tools can use to preview or snippet a page. This tag can also be useful for users who may use assistive technologies when browsing search results.\r\nThe ideal number of characters in the meta description is between ",{"type":33,"tag":54,"props":3378,"children":3379},{},[3380],{"type":39,"value":3381},"140-160 characters",{"type":39,"value":3383},", and we should briefly describe the content and meaning and the page in this text.",{"type":33,"tag":48,"props":3385,"children":3386},{},[3387],{"type":39,"value":3388},"This rule also helps indexing by search bots (e.g. google bot) and thus aids in better SEO.",{"type":33,"tag":48,"props":3390,"children":3391},{},[3392],{"type":33,"tag":54,"props":3393,"children":3394},{},[3395],{"type":39,"value":3396},"Example of how meta description of this article can look like:",{"type":33,"tag":3227,"props":3398,"children":3400},{"code":3399,"language":20,"meta":3230},"\u003Chead>\r\n\u003Cmeta name=\"description\" content=\"Come explore the world of accessible web development. We\\'ll show you the WCAG or WAI-ARIA standards along with sample applications and much more...\">\r\n\u003C/head>\n",[3401],{"type":33,"tag":3233,"props":3402,"children":3403},{},[3404],{"type":33,"tag":3227,"props":3405,"children":3406},{"__ignoreMap":8},[3407],{"type":39,"value":3399},{"type":33,"tag":1601,"props":3409,"children":3410},{},[],{"type":33,"tag":774,"props":3412,"children":3414},{"id":3413},"controlling-the-web-using-the-keyboard",[3415],{"type":39,"value":3416},"Controlling the web using the keyboard",{"type":33,"tag":48,"props":3418,"children":3419},{},[3420],{"type":39,"value":3421},"Websites should be fully keyboard navigable, which is crucial for users with limited mobility.",{"type":33,"tag":774,"props":3423,"children":3425},{"id":3424},"how-to-achieve-this",[3426],{"type":39,"value":3427},"How to achieve this?",{"type":33,"tag":48,"props":3429,"children":3430},{},[3431,3433,3438],{"type":39,"value":3432},"The very basics are to ",{"type":33,"tag":54,"props":3434,"children":3435},{},[3436],{"type":39,"value":3437},"allow the user to navigate the site and interact with the site using tab, escape, arrow keys and enter",{"type":39,"value":3439},". This means that all interaction elements on the page should be able to get focus, or be able to interact with them further.",{"type":33,"tag":48,"props":3441,"children":3442},{},[3443],{"type":33,"tag":210,"props":3444,"children":3447},{"alt":3445,"src":3446,"title":3445,"width":1388},"Keyboard Interaction","/article/web-accessiblity/keyboard.svg",[],{"type":33,"tag":48,"props":3449,"children":3450},{},[3451],{"type":33,"tag":54,"props":3452,"children":3453},{},[3454],{"type":39,"value":3455},"What are the elements that get focus by default?",{"type":33,"tag":132,"props":3457,"children":3458},{},[3459,3467,3475,3483,3491,3499,3507],{"type":33,"tag":136,"props":3460,"children":3461},{},[3462],{"type":33,"tag":140,"props":3463,"children":3464},{},[3465],{"type":39,"value":3466},"\u003Cselect>",{"type":33,"tag":136,"props":3468,"children":3469},{},[3470],{"type":33,"tag":140,"props":3471,"children":3472},{},[3473],{"type":39,"value":3474},"\u003Cinput>",{"type":33,"tag":136,"props":3476,"children":3477},{},[3478],{"type":33,"tag":140,"props":3479,"children":3480},{},[3481],{"type":39,"value":3482},"\u003Ctextarea>",{"type":33,"tag":136,"props":3484,"children":3485},{},[3486],{"type":33,"tag":140,"props":3487,"children":3488},{},[3489],{"type":39,"value":3490},"\u003Ciframe>",{"type":33,"tag":136,"props":3492,"children":3493},{},[3494],{"type":33,"tag":140,"props":3495,"children":3496},{},[3497],{"type":39,"value":3498},"\u003Cbutton>",{"type":33,"tag":136,"props":3500,"children":3501},{},[3502],{"type":33,"tag":140,"props":3503,"children":3504},{},[3505],{"type":39,"value":3506},"\u003Ca href=\"...\">",{"type":33,"tag":136,"props":3508,"children":3509},{},[3510,3512,3517],{"type":39,"value":3511},"Any element for which we declare ",{"type":33,"tag":140,"props":3513,"children":3514},{},[3515],{"type":39,"value":3516},"tabindex",{"type":39,"value":261},{"type":33,"tag":48,"props":3519,"children":3520},{},[3521],{"type":33,"tag":54,"props":3522,"children":3523},{},[3524],{"type":39,"value":3525},"The user on your website should be able to use tab, enter, escape and arrow keys:",{"type":33,"tag":132,"props":3527,"children":3528},{},[3529,3539,3551,3561,3571],{"type":33,"tag":136,"props":3530,"children":3531},{},[3532,3534],{"type":39,"value":3533},"1️⃣ ",{"type":33,"tag":54,"props":3535,"children":3536},{},[3537],{"type":39,"value":3538},"Expand all menu items",{"type":33,"tag":136,"props":3540,"children":3541},{},[3542,3544,3549],{"type":39,"value":3543},"2️⃣ ",{"type":33,"tag":54,"props":3545,"children":3546},{},[3547],{"type":39,"value":3548},"Submit forms",{"type":39,"value":3550}," (including search)",{"type":33,"tag":136,"props":3552,"children":3553},{},[3554,3556],{"type":39,"value":3555},"3️⃣ ",{"type":33,"tag":54,"props":3557,"children":3558},{},[3559],{"type":39,"value":3560},"Close or confirm modal windows and cookie bar",{"type":33,"tag":136,"props":3562,"children":3563},{},[3564,3566],{"type":39,"value":3565},"4️⃣ ",{"type":33,"tag":54,"props":3567,"children":3568},{},[3569],{"type":39,"value":3570},"Move around the site using linking",{"type":33,"tag":136,"props":3572,"children":3573},{},[3574,3576],{"type":39,"value":3575},"5️⃣ ",{"type":33,"tag":54,"props":3577,"children":3578},{},[3579],{"type":39,"value":3580},"To be able to have other interactions such as sliders, add to cart, find additional information that normally only shows on hover, etc",{"type":33,"tag":1601,"props":3582,"children":3583},{},[],{"type":33,"tag":774,"props":3585,"children":3587},{"id":3586},"contrast-ratio-and-text-legibility",[3588],{"type":39,"value":3589},"Contrast ratio and text legibility",{"type":33,"tag":48,"props":3591,"children":3592},{},[3593,3595,3600,3602,3607],{"type":39,"value":3594},"The right contrast ratio between text and background ",{"type":33,"tag":54,"props":3596,"children":3597},{},[3598],{"type":39,"value":3599},"increases readability and improves accessibility for users",{"type":39,"value":3601}," with visual impairments, but also for those using devices with smaller screens ",{"type":33,"tag":54,"props":3603,"children":3604},{},[3605],{"type":39,"value":3606},"or in poor lighting conditions",{"type":39,"value":3608}," (you'll know when the summer sun is beating down and you're trying to find a contact number on the web to call a business).",{"type":33,"tag":48,"props":3610,"children":3611},{},[3612,3614,3619],{"type":39,"value":3613},"It's good to say that contrast ratio ",{"type":33,"tag":54,"props":3615,"children":3616},{},[3617],{"type":39,"value":3618},"should be addressed in the design of a website",{"type":39,"value":3620},", not during its implementation",{"type":33,"tag":994,"props":3622,"children":3623},{},[3624,3634],{"type":33,"tag":48,"props":3625,"children":3626},{},[3627,3632],{"type":33,"tag":54,"props":3628,"children":3629},{},[3630],{"type":39,"value":3631},"Tip:",{"type":39,"value":3633},"\r\nThe ratio can be calculated by entering the text color and background color into an online calculator, the higher the better.",{"type":33,"tag":48,"props":3635,"children":3636},{},[3637],{"type":33,"tag":101,"props":3638,"children":3641},{"href":3639,"rel":3640},"https://webaim.org/resources/contrastchecker/",[105],[3642],{"type":39,"value":3643},"Link to online calculator ➡️",{"type":33,"tag":48,"props":3645,"children":3646},{},[3647],{"type":33,"tag":54,"props":3648,"children":3649},{},[3650],{"type":39,"value":3651}," ",{"type":33,"tag":48,"props":3653,"children":3654},{},[3655,3657,3662,3664,3669,3671,3676],{"type":39,"value":3656},"WCAG states that the contrast ratio for normal text should ",{"type":33,"tag":54,"props":3658,"children":3659},{},[3660],{"type":39,"value":3661},"be at least 4.5:1",{"type":39,"value":3663},", while for ",{"type":33,"tag":54,"props":3665,"children":3666},{},[3667],{"type":39,"value":3668},"large text it should be at least 3:1",{"type":39,"value":3670}," to meet the AA level 🥈. An even higher contrast is then required for Level AAA 🥇, with ",{"type":33,"tag":54,"props":3672,"children":3673},{},[3674],{"type":39,"value":3675},"minimum 7:1 for normal text and 4.5:1 for large text",{"type":39,"value":3677},". Large text is defined as that which is at least 18px in size.",{"type":33,"tag":48,"props":3679,"children":3680},{},[3681],{"type":33,"tag":210,"props":3682,"children":3686},{"alt":3683,"src":3684,"title":3683,"width":3685},"Contrast ratio","/article/web-accessiblity/contrast.svg","320",[],{"type":33,"tag":48,"props":3688,"children":3689},{},[3690,3692,3698],{"type":39,"value":3691},"To check and simplify, you can follow the calculators to calculate the contrast ratio and the met criteria, for example in ",{"type":33,"tag":101,"props":3693,"children":3695},{"href":3639,"rel":3694},[105],[3696],{"type":39,"value":3697},"link to calculator",{"type":39,"value":261},{"type":33,"tag":994,"props":3700,"children":3701},{},[3702,3710],{"type":33,"tag":48,"props":3703,"children":3704},{},[3705],{"type":33,"tag":54,"props":3706,"children":3707},{},[3708],{"type":39,"value":3709},"For clarity, the table of values below:",{"type":33,"tag":2212,"props":3711,"children":3712},{},[3713,3733],{"type":33,"tag":2216,"props":3714,"children":3715},{},[3716],{"type":33,"tag":2220,"props":3717,"children":3718},{},[3719,3724,3728],{"type":33,"tag":2224,"props":3720,"children":3721},{"align":2226},[3722],{"type":39,"value":3723},"Text type",{"type":33,"tag":2224,"props":3725,"children":3726},{"align":2226},[3727],{"type":39,"value":3683},{"type":33,"tag":2224,"props":3729,"children":3730},{"align":2226},[3731],{"type":39,"value":3732},"WCAG compliance level",{"type":33,"tag":2261,"props":3734,"children":3735},{},[3736,3754,3771,3789],{"type":33,"tag":2220,"props":3737,"children":3738},{},[3739,3744,3749],{"type":33,"tag":2268,"props":3740,"children":3741},{"align":2226},[3742],{"type":39,"value":3743},"Normal text",{"type":33,"tag":2268,"props":3745,"children":3746},{"align":2226},[3747],{"type":39,"value":3748},"4.5:1 and above",{"type":33,"tag":2268,"props":3750,"children":3751},{"align":2226},[3752],{"type":39,"value":3753},"AA",{"type":33,"tag":2220,"props":3755,"children":3756},{},[3757,3762,3767],{"type":33,"tag":2268,"props":3758,"children":3759},{"align":2226},[3760],{"type":39,"value":3761},"Large Text",{"type":33,"tag":2268,"props":3763,"children":3764},{"align":2226},[3765],{"type":39,"value":3766},"3:1 and above",{"type":33,"tag":2268,"props":3768,"children":3769},{"align":2226},[3770],{"type":39,"value":3753},{"type":33,"tag":2220,"props":3772,"children":3773},{},[3774,3779,3784],{"type":33,"tag":2268,"props":3775,"children":3776},{"align":2226},[3777],{"type":39,"value":3778},"Normal Text",{"type":33,"tag":2268,"props":3780,"children":3781},{"align":2226},[3782],{"type":39,"value":3783},"7:1 and above",{"type":33,"tag":2268,"props":3785,"children":3786},{"align":2226},[3787],{"type":39,"value":3788},"AAA",{"type":33,"tag":2220,"props":3790,"children":3791},{},[3792,3796,3800],{"type":33,"tag":2268,"props":3793,"children":3794},{"align":2226},[3795],{"type":39,"value":3761},{"type":33,"tag":2268,"props":3797,"children":3798},{"align":2226},[3799],{"type":39,"value":3748},{"type":33,"tag":2268,"props":3801,"children":3802},{"align":2226},[3803],{"type":39,"value":3788},{"type":33,"tag":1601,"props":3805,"children":3806},{},[],{"type":33,"tag":774,"props":3808,"children":3810},{"id":3809},"wai-aria-attributes-for-assistive-devices",[3811],{"type":39,"value":3812},"WAI-ARIA attributes for assistive devices",{"type":33,"tag":48,"props":3814,"children":3815},{},[3816,3822,3824,3829],{"type":33,"tag":101,"props":3817,"children":3819},{"href":3818},"#wai-aria",[3820],{"type":39,"value":3821},"We talked about WAI-AIRA in the introduction",{"type":39,"value":3823},", so it is a set of added ",{"type":33,"tag":54,"props":3825,"children":3826},{},[3827],{"type":39,"value":3828},"attributes and properties",{"type":39,"value":3830}," that we can use to enrich our HTML to make it easier for people using web readers to navigate and work with the web.",{"type":33,"tag":48,"props":3832,"children":3833},{},[3834],{"type":33,"tag":54,"props":3835,"children":3836},{},[3837],{"type":39,"value":3651},{"type":33,"tag":48,"props":3839,"children":3840},{},[3841],{"type":33,"tag":54,"props":3842,"children":3843},{},[3844],{"type":39,"value":3845},"Let's practically list the most important attributes directly with examples:",{"type":33,"tag":3847,"props":3848,"children":3850},"h4",{"id":3849},"rolebutton",[3851],{"type":33,"tag":140,"props":3852,"children":3853},{},[3854],{"type":39,"value":3855},"role=\"button\"",{"type":33,"tag":48,"props":3857,"children":3858},{},[3859,3861,3866],{"type":39,"value":3860},"identifies the element as a button, allowing assistive technologies to identify that it is an ",{"type":33,"tag":54,"props":3862,"children":3863},{},[3864],{"type":39,"value":3865},"interactive element",{"type":39,"value":3867}," that can be activated by pressing or clicking.",{"type":33,"tag":3227,"props":3869,"children":3871},{"code":3870,"language":20,"meta":3230},"\u003Cbutton role=\"button\">Button\u003C/button>\n",[3872],{"type":33,"tag":3233,"props":3873,"children":3874},{},[3875],{"type":33,"tag":3227,"props":3876,"children":3877},{"__ignoreMap":8},[3878],{"type":39,"value":3870},{"type":33,"tag":48,"props":3880,"children":3881},{},[3882],{"type":33,"tag":54,"props":3883,"children":3884},{},[3885],{"type":39,"value":3651},{"type":33,"tag":3847,"props":3887,"children":3889},{"id":3888},"rolenavigation",[3890],{"type":33,"tag":140,"props":3891,"children":3892},{},[3893],{"type":39,"value":3894},"role=\"navigation\"",{"type":33,"tag":48,"props":3896,"children":3897},{},[3898,3900,3905],{"type":39,"value":3899},"marks part of the page as a navigation menu, which helps screen readers easily ",{"type":33,"tag":54,"props":3901,"children":3902},{},[3903],{"type":39,"value":3904},"identify navigation elements",{"type":39,"value":261},{"type":33,"tag":3227,"props":3907,"children":3909},{"code":3908,"language":20,"meta":3230},"\u003Cnav role=\"navigation\">\r\n  \u003Cul>\r\n    \u003Cli>\u003Ca href=\"#\">Home\u003C/a>\u003C/li>\r\n    \u003Cli>\u003Ca href=\"#\">About\u003C/a>\u003C/li> \r\n    \u003Cli>\u003Ca href=\"#\">Contact\u003C/a>\u003C/li>\r\n  \u003C/ul>\r\n\u003C/nav>\n",[3910],{"type":33,"tag":3233,"props":3911,"children":3912},{},[3913],{"type":33,"tag":3227,"props":3914,"children":3915},{"__ignoreMap":8},[3916],{"type":39,"value":3908},{"type":33,"tag":48,"props":3918,"children":3919},{},[3920],{"type":33,"tag":54,"props":3921,"children":3922},{},[3923],{"type":39,"value":3651},{"type":33,"tag":3847,"props":3925,"children":3927},{"id":3926},"roletextbox",[3928],{"type":33,"tag":140,"props":3929,"children":3930},{},[3931],{"type":39,"value":3932},"role=\"textbox\"",{"type":33,"tag":48,"props":3934,"children":3935},{},[3936,3938,3943],{"type":39,"value":3937},"marks the element as a textbox, allowing assistive technologies to interpret the element as an ",{"type":33,"tag":54,"props":3939,"children":3940},{},[3941],{"type":39,"value":3942},"input box",{"type":39,"value":3944}," into which the user can enter text.",{"type":33,"tag":48,"props":3946,"children":3947},{},[3948],{"type":33,"tag":54,"props":3949,"children":3950},{},[3951],{"type":39,"value":3651},{"type":33,"tag":3847,"props":3953,"children":3955},{"id":3954},"aria-label",[3956],{"type":33,"tag":140,"props":3957,"children":3958},{},[3959],{"type":39,"value":3954},{"type":33,"tag":48,"props":3961,"children":3962},{},[3963,3965,3970],{"type":39,"value":3964},"provides an ",{"type":33,"tag":54,"props":3966,"children":3967},{},[3968],{"type":39,"value":3969},"alternative label for the element",{"type":39,"value":3971},", which helps users with limited vision to understand the function of the element",{"type":33,"tag":3227,"props":3973,"children":3975},{"code":3974,"language":20,"meta":3230},"\u003Clabel for=\"username\">Username:\u003C/label>\r\n\u003Cinput type=\"text\" id=\"username\" name=\"username\" aria-label=\"Username\">\n",[3976],{"type":33,"tag":3233,"props":3977,"children":3978},{},[3979],{"type":33,"tag":3227,"props":3980,"children":3981},{"__ignoreMap":8},[3982],{"type":39,"value":3974},{"type":33,"tag":48,"props":3984,"children":3985},{},[3986,3988,3993,3995,4000,4002,4007],{"type":39,"value":3987},"Note the use of the ",{"type":33,"tag":140,"props":3989,"children":3990},{},[3991],{"type":39,"value":3992},"for",{"type":39,"value":3994}," + ",{"type":33,"tag":140,"props":3996,"children":3997},{},[3998],{"type":39,"value":3999},"id",{"type":39,"value":4001}," attribute, which is one of the other important accessibility points on the site, which allows readers to ",{"type":33,"tag":54,"props":4003,"children":4004},{},[4005],{"type":39,"value":4006},"link the label to the input field",{"type":39,"value":4008}," for better orientation and description.",{"type":33,"tag":48,"props":4010,"children":4011},{},[4012],{"type":33,"tag":54,"props":4013,"children":4014},{},[4015],{"type":39,"value":3651},{"type":33,"tag":3847,"props":4017,"children":4019},{"id":4018},"rolebanner",[4020],{"type":33,"tag":140,"props":4021,"children":4022},{},[4023],{"type":39,"value":4024},"role=\"banner\"",{"type":33,"tag":48,"props":4026,"children":4027},{},[4028,4030],{"type":39,"value":4029},"Indicates the part of the page that contains the ",{"type":33,"tag":54,"props":4031,"children":4032},{},[4033],{"type":39,"value":4034},"website name, logo or other identifying elements",{"type":33,"tag":3227,"props":4036,"children":4038},{"code":4037,"language":20,"meta":3230},"\u003Cheader role=\"banner\">\r\n  \u003Cimg src=\"...\" alt=\"Logo\">\r\n  \u003Cnav role=\"navigation\">\r\n    \u003C!-- Navigation links -->\r\n  \u003C/nav>\r\n\u003C/header>\n",[4039],{"type":33,"tag":3233,"props":4040,"children":4041},{},[4042],{"type":33,"tag":3227,"props":4043,"children":4044},{"__ignoreMap":8},[4045],{"type":39,"value":4037},{"type":33,"tag":48,"props":4047,"children":4048},{},[4049],{"type":33,"tag":54,"props":4050,"children":4051},{},[4052],{"type":39,"value":3651},{"type":33,"tag":3847,"props":4054,"children":4056},{"id":4055},"rolemain",[4057],{"type":33,"tag":140,"props":4058,"children":4059},{},[4060],{"type":39,"value":4061},"role=\"main\"",{"type":33,"tag":48,"props":4063,"children":4064},{},[4065,4067,4072,4074],{"type":39,"value":4066},"indicates the main content part of the page that carries the ",{"type":33,"tag":54,"props":4068,"children":4069},{},[4070],{"type":39,"value":4071},"most important information",{"type":39,"value":4073},", for example on this particular page it would be the ",{"type":33,"tag":54,"props":4075,"children":4076},{},[4077],{"type":39,"value":4078},"content of the article itself",{"type":33,"tag":3227,"props":4080,"children":4082},{"code":4081,"language":20,"meta":3230},"\u003Cdiv role=\"main\">\r\n  \u003C!-- Main content of page -->\r\n\u003C/div>\n",[4083],{"type":33,"tag":3233,"props":4084,"children":4085},{},[4086],{"type":33,"tag":3227,"props":4087,"children":4088},{"__ignoreMap":8},[4089],{"type":39,"value":4081},{"type":33,"tag":48,"props":4091,"children":4092},{},[4093],{"type":33,"tag":54,"props":4094,"children":4095},{},[4096],{"type":39,"value":3651},{"type":33,"tag":3847,"props":4098,"children":4100},{"id":4099},"rolesearch",[4101],{"type":33,"tag":140,"props":4102,"children":4103},{},[4104],{"type":39,"value":4105},"role=\"search\"",{"type":33,"tag":48,"props":4107,"children":4108},{},[4109,4111,4116],{"type":39,"value":4110},"indicates the part of the page containing the ",{"type":33,"tag":54,"props":4112,"children":4113},{},[4114],{"type":39,"value":4115},"search form",{"type":39,"value":4117},", can be applied directly to the form itself",{"type":33,"tag":3227,"props":4119,"children":4121},{"code":4120,"language":20,"meta":3230},"\u003Cform action=\"/search\" method=\"get\" role=\"search\">\r\n    \u003Clabel for=\"search-input\">Search this site\u003C/label>\r\n    \u003Cinput type=\"search\" name=\"q\" id=\"search-input\" placeholder=\"Search...\" aria-label=\"Search field\">\r\n    \u003Cbutton type=\"submit\" role=\"button\">Search\u003C/button>\r\n\u003C/form>\n",[4122],{"type":33,"tag":3233,"props":4123,"children":4124},{},[4125],{"type":33,"tag":3227,"props":4126,"children":4127},{"__ignoreMap":8},[4128],{"type":39,"value":4120},{"type":33,"tag":48,"props":4130,"children":4131},{},[4132],{"type":33,"tag":54,"props":4133,"children":4134},{},[4135],{"type":39,"value":3651},{"type":33,"tag":3847,"props":4137,"children":4139},{"id":4138},"rolecomplementary",[4140],{"type":33,"tag":140,"props":4141,"children":4142},{},[4143],{"type":39,"value":4144},"role=\"complementary\"",{"type":33,"tag":48,"props":4146,"children":4147},{},[4148,4150],{"type":39,"value":4149},"Indicates supplementary content that is not necessary to understand the main content of the page, such as ",{"type":33,"tag":54,"props":4151,"children":4152},{},[4153],{"type":39,"value":4154},"sidebar links or widgets",{"type":33,"tag":3227,"props":4156,"children":4158},{"code":4157,"language":20,"meta":3230},"\u003Caside role=\"complementary\">\r\n  \u003C!-- Complementary content, such as a sidebar -->\r\n\u003C/aside>\n",[4159],{"type":33,"tag":3233,"props":4160,"children":4161},{},[4162],{"type":33,"tag":3227,"props":4163,"children":4164},{"__ignoreMap":8},[4165],{"type":39,"value":4157},{"type":33,"tag":48,"props":4167,"children":4168},{},[4169],{"type":33,"tag":54,"props":4170,"children":4171},{},[4172],{"type":39,"value":3651},{"type":33,"tag":3847,"props":4174,"children":4176},{"id":4175},"rolecontentinfo",[4177],{"type":33,"tag":140,"props":4178,"children":4179},{},[4180],{"type":39,"value":4181},"role=\"contentinfo\"",{"type":33,"tag":48,"props":4183,"children":4184},{},[4185,4187,4192],{"type":39,"value":4186},"This attribute indicates ",{"type":33,"tag":54,"props":4188,"children":4189},{},[4190],{"type":39,"value":4191},"information about the content of the page",{"type":39,"value":4193},", usually located in the footer, such as copyright, contact information, or links to terms of use.",{"type":33,"tag":3227,"props":4195,"children":4197},{"code":4196,"language":20,"meta":3230},"\u003Cfooter role=\"contentinfo\">\r\n  \u003C!-- Content information, such as the footer -->\r\n\u003C/footer>\n",[4198],{"type":33,"tag":3233,"props":4199,"children":4200},{},[4201],{"type":33,"tag":3227,"props":4202,"children":4203},{"__ignoreMap":8},[4204],{"type":39,"value":4196},{"type":33,"tag":1601,"props":4206,"children":4207},{},[],{"type":33,"tag":774,"props":4209,"children":4211},{"id":4210},"alternative-web-version",[4212],{"type":39,"value":4213},"Alternative web version",{"type":33,"tag":48,"props":4215,"children":4216},{},[4217,4219,4224],{"type":39,"value":4218},"There may be cases where ",{"type":33,"tag":54,"props":4220,"children":4221},{},[4222],{"type":39,"value":4223},"web design does not allow for effective deployment of web accessibility",{"type":39,"value":4225},", either for design or technical reasons (for example, advanced UI work that would be difficult to optimize).",{"type":33,"tag":48,"props":4227,"children":4228},{},[4229,4231,4236],{"type":39,"value":4230},"For these and other cases, an ",{"type":33,"tag":54,"props":4232,"children":4233},{},[4234],{"type":39,"value":4235},"alternative version of the site",{"type":39,"value":4237}," can be built that differs from the classic one and is tailored primarily for web accessibility.",{"type":33,"tag":48,"props":4239,"children":4240},{},[4241,4243,4248],{"type":39,"value":4242},"The alternative version can be ",{"type":33,"tag":54,"props":4244,"children":4245},{},[4246],{"type":39,"value":4247},"differentiated by the CSS styles used",{"type":39,"value":4249}," (stronger focus, higher color contrast, larger fonts, etc...), but it can also differ in the layout of sections on the site or, for example, a simplified conversion path.",{"type":33,"tag":1601,"props":4251,"children":4252},{},[],{"type":33,"tag":774,"props":4254,"children":4256},{"id":4255},"page-speed",[4257],{"type":39,"value":4258},"Page speed",{"type":33,"tag":48,"props":4260,"children":4261},{},[4262,4264,4269,4271,4276,4278,4283],{"type":39,"value":4263},"The responsiveness of web applications and pages ",{"type":33,"tag":54,"props":4265,"children":4266},{},[4267],{"type":39,"value":4268},"has a big impact on their usability",{"type":39,"value":4270},", this is also related to web accessibility, because the faster a website is, the faster and easier it is for the user to navigate and interact with it.\r\nIn addition to easier and faster web interactions, ",{"type":33,"tag":54,"props":4272,"children":4273},{},[4274],{"type":39,"value":4275},"we also gain an SEO advantage",{"type":39,"value":4277},", where search engines like Google ",{"type":33,"tag":54,"props":4279,"children":4280},{},[4281],{"type":39,"value":4282},"prioritize sites that provide better performance",{"type":39,"value":4284}," in the search listing.",{"type":33,"tag":48,"props":4286,"children":4287},{},[4288,4290,4297],{"type":39,"value":4289},"You can get a rough idea of page speed using ",{"type":33,"tag":101,"props":4291,"children":4294},{"href":4292,"rel":4293,"target":106},"https://pagespeed.web.dev",[105],[4295],{"type":39,"value":4296},"Google PageSpeed insights",{"type":39,"value":261},{"type":33,"tag":48,"props":4299,"children":4300},{},[4301],{"type":33,"tag":210,"props":4302,"children":4306},{"alt":4303,"src":4304,"title":4303,"width":4305},"Web Vitals","/article/web-accessiblity/webvitals.png","480",[],{"type":33,"tag":1601,"props":4308,"children":4309},{},[],{"type":33,"tag":41,"props":4311,"children":4313},{"id":4312},"what-to-watch-out-for",[4314],{"type":39,"value":4315},"What to watch out for",{"type":33,"tag":774,"props":4317,"children":4319},{"id":4318},"google-re-captcha",[4320],{"type":39,"value":4321},"Google Re-Captcha",{"type":33,"tag":48,"props":4323,"children":4324},{},[4325,4327,4332,4334,4339],{"type":39,"value":4326},"A frequently used tool to ",{"type":33,"tag":54,"props":4328,"children":4329},{},[4330],{"type":39,"value":4331},"distinguish people from bots online",{"type":39,"value":4333},", to prevent misuse of forms or services by ",{"type":33,"tag":54,"props":4335,"children":4336},{},[4337],{"type":39,"value":4338},"deciphering objects in a picture or listening to spoken words",{"type":39,"value":4340}," and transcribing them into a text box. But is this method appropriate with respect to web accessibility?",{"type":33,"tag":48,"props":4342,"children":4343},{},[4344],{"type":33,"tag":210,"props":4345,"children":4349},{"alt":4346,"src":4347,"title":4346,"width":4348},"reCaptcha","/article/web-accessiblity/recaptcha.png","300",[],{"type":33,"tag":48,"props":4351,"children":4352},{},[4353],{"type":33,"tag":54,"props":4354,"children":4355},{},[4356],{"type":39,"value":4357},"I think this may not be a suitable solution for the following reasons:",{"type":33,"tag":132,"props":4359,"children":4360},{},[4361,4366,4371,4376],{"type":33,"tag":136,"props":4362,"children":4363},{},[4364],{"type":39,"value":4365},"Heavy testing leads to leaving the website.",{"type":33,"tag":136,"props":4367,"children":4368},{},[4369],{"type":39,"value":4370},"It can be difficult for people with motor difficulties to hit the images",{"type":33,"tag":136,"props":4372,"children":4373},{},[4374],{"type":39,"value":4375},"Persons with visual difficulties may have difficulty deciphering the image",{"type":33,"tag":136,"props":4377,"children":4378},{},[4379],{"type":39,"value":4380},"However, when switching to audio form, only the English transcript is offered, which can be a big problem for non-English speakers",{"type":33,"tag":48,"props":4382,"children":4383},{},[4384],{"type":33,"tag":54,"props":4385,"children":4386},{},[4387],{"type":39,"value":3651},{"type":33,"tag":994,"props":4389,"children":4390},{},[4391,4408],{"type":33,"tag":48,"props":4392,"children":4393},{},[4394],{"type":33,"tag":54,"props":4395,"children":4396},{"target":106},[4397,4399,4406],{"type":39,"value":4398},"The solution may be to secure forms ",{"type":33,"tag":101,"props":4400,"children":4403},{"href":4401,"rel":4402},"https://stackoverflow.com/questions/26452716/how-to-create-a-nuclear-honeypot-to-catch-form-spammers",[105],[4404],{"type":39,"value":4405},"by other methods",{"type":39,"value":4407},":",{"type":33,"tag":132,"props":4409,"children":4410},{},[4411,4426,4440,4450],{"type":33,"tag":136,"props":4412,"children":4413},{},[4414,4424],{"type":33,"tag":101,"props":4415,"children":4418},{"href":4416,"rel":4417,"target":106},"https://cs.wikipedia.org/wiki/Honeypot",[105],[4419],{"type":33,"tag":54,"props":4420,"children":4421},{},[4422],{"type":39,"value":4423},"Honeypot",{"type":39,"value":4425}," 🍯 - This method involves adding a hidden field to the form that will only be visible to the bot, but not to the normal user. If the field is filled in, the form is automatically marked as invalid and rejected.",{"type":33,"tag":136,"props":4427,"children":4428},{},[4429,4438],{"type":33,"tag":54,"props":4430,"children":4431},{"target":106},[4432],{"type":33,"tag":101,"props":4433,"children":4435},{"href":4401,"rel":4434},[105],[4436],{"type":39,"value":4437},"Time Trap",{"type":39,"value":4439}," ⌛ - Bots often fill out forms very quickly, while humans usually need some time to fill them out. The Time Trap method can detect if a form is filled out too quickly and mark it as suspicious.",{"type":33,"tag":136,"props":4441,"children":4442},{},[4443,4448],{"type":33,"tag":54,"props":4444,"children":4445},{},[4446],{"type":39,"value":4447},"Simple Question",{"type":39,"value":4449}," ❓- You can protect the form against spam by using a checkbox and a simple question, for example: What color are tree leaves most often?",{"type":33,"tag":136,"props":4451,"children":4452},{},[4453,4458],{"type":33,"tag":54,"props":4454,"children":4455},{},[4456],{"type":39,"value":4457},"Geographic restrictions",{"type":39,"value":4459}," 🌍 - If circumstances allow it, you can allow the form to be submitted only from a certain range of IP addresses, thus allowing the form to be submitted only from the Czech Republic, for example.",{"type":33,"tag":774,"props":4461,"children":4463},{"id":4462},"keyboard-traps",[4464],{"type":39,"value":4465},"Keyboard traps",{"type":33,"tag":48,"props":4467,"children":4468},{},[4469,4474,4476,4481,4483,4488,4490,4495,4497,4502],{"type":33,"tag":54,"props":4470,"children":4471},{},[4472],{"type":39,"value":4473},"Imagine the following situation:",{"type":39,"value":4475}," As a person with motor difficulties, you ",{"type":33,"tag":54,"props":4477,"children":4478},{},[4479],{"type":39,"value":4480},"navigate the web using only your keyboard",{"type":39,"value":4482},". You are on the detail page of an e-shop for a product and come across the \"View more product information\" button, ",{"type":33,"tag":54,"props":4484,"children":4485},{},[4486],{"type":39,"value":4487},"press enter and a modal window",{"type":39,"value":4489}," appears with more information about the product. However, ",{"type":33,"tag":54,"props":4491,"children":4492},{},[4493],{"type":39,"value":4494},"when you want to close the modal, nothing helps",{"type":39,"value":4496},", you press the esc key, you try to focus on the cross to close the modal window, but unfortunately it is not made as a link and does not have a tab index. You ",{"type":33,"tag":54,"props":4498,"children":4499},{},[4500],{"type":39,"value":4501},"have fallen into a keyboard trap",{"type":39,"value":4503}," and only a refresh of the page will help.",{"type":33,"tag":994,"props":4505,"children":4506},{},[4507],{"type":33,"tag":48,"props":4508,"children":4509},{},[4510,4511,4516],{"type":39,"value":2760},{"type":33,"tag":54,"props":4512,"children":4513},{},[4514],{"type":39,"value":4515},"solution to these situations is to test",{"type":39,"value":4517},", go through the whole site and make sure that such traps are not present.",{"type":33,"tag":41,"props":4519,"children":4521},{"id":4520},"how-to-test",[4522],{"type":39,"value":4523},"How to test?",{"type":33,"tag":48,"props":4525,"children":4526},{},[4527],{"type":39,"value":4528},"We definitely need to test, why would we need theoretical knowledge and implementation without proper verification in practice.",{"type":33,"tag":48,"props":4530,"children":4531},{},[4532],{"type":33,"tag":54,"props":4533,"children":4534},{},[4535],{"type":39,"value":4536},"Testing could be divided into two groups:",{"type":33,"tag":132,"props":4538,"children":4539},{},[4540,4557],{"type":33,"tag":136,"props":4541,"children":4542},{},[4543,4548,4550,4555],{"type":33,"tag":54,"props":4544,"children":4545},{},[4546],{"type":39,"value":4547},"Automatic tests",{"type":39,"value":4549},", these are tests where we use software that ",{"type":33,"tag":54,"props":4551,"children":4552},{},[4553],{"type":39,"value":4554},"crawls the web and checks it for accessibility",{"type":39,"value":4556},". Such tests are good for initially determining the state of optimizing a site for accessibility and identifying critical bugs.",{"type":33,"tag":136,"props":4558,"children":4559},{},[4560,4565,4567,4572,4574,4579],{"type":33,"tag":54,"props":4561,"children":4562},{},[4563],{"type":39,"value":4564},"Manual testing",{"type":39,"value":4566},", is ",{"type":33,"tag":54,"props":4568,"children":4569},{},[4570],{"type":39,"value":4571},"human testing",{"type":39,"value":4573}," ideally by our target audience for whom we are optimizing the site. ",{"type":33,"tag":54,"props":4575,"children":4576},{},[4577],{"type":39,"value":4578},"Manual testing will be more thorough",{"type":39,"value":4580}," compared to automated testing and can give us not only technical feedback but also user feedback which is equally valuable.",{"type":33,"tag":48,"props":4582,"children":4583},{},[4584],{"type":39,"value":4585},"When testing, we should have a preconceived strategy for how we test the site. It's also a good idea to set web accessibility acceptance criteria in advance (a simple example is the checklist below) and check them off as you go along.",{"type":33,"tag":774,"props":4587,"children":4589},{"id":4588},"keyboard",[4590],{"type":39,"value":4591},"Keyboard",{"type":33,"tag":48,"props":4593,"children":4594},{},[4595,4596,4601,4603,4608,4610,4615],{"type":39,"value":2760},{"type":33,"tag":54,"props":4597,"children":4598},{},[4599],{"type":39,"value":4600},"Tester will only go through the page using the keyboard",{"type":39,"value":4602},", examining whether it is easy to navigate between links, buttons and other interactive elements, and whether they can be activated using keyboard shortcuts. The emphasis is on ",{"type":33,"tag":54,"props":4604,"children":4605},{},[4606],{"type":39,"value":4607},"making navigation logical and predictable",{"type":39,"value":4609},", meaning that the user should be able to easily determine which element on the page is currently active and how to navigate to other parts of the content.\r\nKeyboard ",{"type":33,"tag":54,"props":4611,"children":4612},{},[4613],{"type":39,"value":4614},"testing is key",{"type":39,"value":4616}," to ensure that the website is usable for users with limited fine motor skills or those who cannot use a mouse for other reasons.",{"type":33,"tag":774,"props":4618,"children":4620},{"id":4619},"nvda-firefox",[4621],{"type":39,"value":4622},"NVDA + Firefox",{"type":33,"tag":48,"props":4624,"children":4625},{},[4626,4633,4635,4640,4642,4647],{"type":33,"tag":101,"props":4627,"children":4630},{"href":4628,"rel":4629,"target":106},"https://www.nvaccess.org",[105],[4631],{"type":39,"value":4632},"Nonvisual Desktop Access (acronym NVDA)",{"type":39,"value":4634}," is a great tool for blind and low vision users, allowing them ",{"type":33,"tag":54,"props":4636,"children":4637},{},[4638],{"type":39,"value":4639},"full access to web content",{"type":39,"value":4641},". The NVDA project was founded in 2006 by Michael Curran to provide an effective image reader for Microsoft Windows users. Since then, it has become ",{"type":33,"tag":54,"props":4643,"children":4644},{},[4645],{"type":39,"value":4646},"one of the most widely used tools",{"type":39,"value":4648}," for computer use for those who rely on voice output feedback.",{"type":33,"tag":48,"props":4650,"children":4651},{},[4652],{"type":33,"tag":210,"props":4653,"children":4657},{"alt":4654,"src":4655,"title":4654,"width":4656},"NVDA","/article/web-accessiblity/nvaccess.png","280",[],{"type":33,"tag":48,"props":4659,"children":4660},{},[4661,4663,4668],{"type":39,"value":4662},"The combination of NVDA with the Mozilla Firefox web browser creates an ",{"type":33,"tag":54,"props":4664,"children":4665},{},[4666],{"type":39,"value":4667},"excellent testing environment",{"type":39,"value":4669}," for web accessibility verification. This combination allows testers to simulate the experience of users with visual impairments and identify areas where websites can be improved for accessibility.",{"type":33,"tag":774,"props":4671,"children":4673},{"id":4672},"voiceover-mac",[4674],{"type":39,"value":4675},"VoiceOver Mac",{"type":33,"tag":48,"props":4677,"children":4678},{},[4679,4681,4686,4688,4695,4697,4702,4704,4709],{"type":39,"value":4680},"You may also be familiar with it, the ",{"type":33,"tag":54,"props":4682,"children":4683},{},[4684],{"type":39,"value":4685},"image reader provided by the macOS (Apple)",{"type":39,"value":4687}," operating system. ",{"type":33,"tag":101,"props":4689,"children":4692},{"href":4690,"rel":4691,"target":106},"https://support.apple.com/cs-cz/guide/voiceover/vo2682/mac",[105],[4693],{"type":39,"value":4694},"This tool",{"type":39,"value":4696}," is designed to provide voice feedback and ",{"type":33,"tag":54,"props":4698,"children":4699},{},[4700],{"type":39,"value":4701},"allow users with visual impairments to navigate within the system and use applications",{"type":39,"value":4703},". VoiceOver Mac is a powerful accessibility tool that allows users to not only browse content on screen, but also interact with it using a variety of gestures and keyboard shortcuts. This integrated tool provides a ",{"type":33,"tag":54,"props":4705,"children":4706},{},[4707],{"type":39,"value":4708},"wide range of functions",{"type":39,"value":4710}," including reading text, describing graphics, and navigating web pages.",{"type":33,"tag":48,"props":4712,"children":4713},{},[4714],{"type":33,"tag":210,"props":4715,"children":4718},{"alt":4675,"src":4716,"title":4675,"width":4717},"/article/web-accessiblity/voiceover.png","180",[],{"type":33,"tag":994,"props":4720,"children":4721},{},[4722,4730],{"type":33,"tag":48,"props":4723,"children":4724},{},[4725],{"type":33,"tag":54,"props":4726,"children":4727},{},[4728],{"type":39,"value":4729},"A few observations for testing with the web reader:",{"type":33,"tag":132,"props":4731,"children":4732},{},[4733,4744,4756,4774],{"type":33,"tag":136,"props":4734,"children":4735},{},[4736,4738,4743],{"type":39,"value":4737},"All text, links, forms and other interactive elements ",{"type":33,"tag":54,"props":4739,"children":4740},{},[4741],{"type":39,"value":4742},"should be presented in a clear manner",{"type":39,"value":261},{"type":33,"tag":136,"props":4745,"children":4746},{},[4747,4749,4754],{"type":39,"value":4748},"It is important to check that all images on the page have ",{"type":33,"tag":54,"props":4750,"children":4751},{},[4752],{"type":39,"value":4753},"appropriate alternative text",{"type":39,"value":4755}," to describe their content to users with disabilities.",{"type":33,"tag":136,"props":4757,"children":4758},{},[4759,4761,4766,4768,4773],{"type":39,"value":4760},"It is also important to check that any interactive elements, such as buttons and links, are ",{"type":33,"tag":54,"props":4762,"children":4763},{},[4764],{"type":39,"value":4765},"easily accessible using keyboard shortcuts",{"type":39,"value":4767}," and that the navigation is sufficiently clear ",{"type":33,"tag":54,"props":4769,"children":4770},{},[4771],{"type":39,"value":4772},"defines the reading order for image reader users",{"type":39,"value":261},{"type":33,"tag":136,"props":4775,"children":4776},{},[4777,4779,4784],{"type":39,"value":4778},"It is also advisable to ",{"type":33,"tag":54,"props":4780,"children":4781},{},[4782],{"type":39,"value":4783},"test dynamic content and interactive page features",{"type":39,"value":4785}," such as dialog boxes and form fields to ensure that these elements are correctly interpreted and navigable.",{"type":33,"tag":48,"props":4787,"children":4788},{},[4789],{"type":33,"tag":54,"props":4790,"children":4791},{},[4792],{"type":39,"value":3651},{"type":33,"tag":774,"props":4794,"children":4796},{"id":4795},"automated-testing-tools",[4797],{"type":39,"value":4798},"Automated testing tools",{"type":33,"tag":3847,"props":4800,"children":4802},{"id":4801},"pa11y-opensource",[4803],{"type":39,"value":4804},"pa11y (opensource)",{"type":33,"tag":48,"props":4806,"children":4807},{},[4808,4809,4814,4816,4821],{"type":39,"value":2004},{"type":33,"tag":54,"props":4810,"children":4811},{},[4812],{"type":39,"value":4813},"tool developed in Node.js",{"type":39,"value":4815}," that allows processing of web URLs and then provides a list of semantic errors and accessibility recommendations. Its flexibility allows integration directly into the development process or use as ",{"type":33,"tag":54,"props":4817,"children":4818},{},[4819],{"type":39,"value":4820},"part of continuous integration and deployment (CI/CD)",{"type":39,"value":4822},". This ensures that accessibility standards are met with every change to the site.",{"type":33,"tag":48,"props":4824,"children":4825},{},[4826],{"type":33,"tag":210,"props":4827,"children":4830},{"alt":4828,"src":4829,"title":4828},"Pa11y","/article/web-accessiblity/pa11y.png",[],{"type":33,"tag":41,"props":4832,"children":4834},{"id":4833},"web-accessibility-checklist",[4835],{"type":39,"value":4836},"Web Accessibility Checklist",{"type":33,"tag":48,"props":4838,"children":4839},{},[4840,4842,4847],{"type":39,"value":4841},"I have compiled a checklist of points ",{"type":33,"tag":54,"props":4843,"children":4844},{},[4845],{"type":39,"value":4846},"that I consider important when implementing accessibility on the web",{"type":39,"value":4848},". I tried to prioritize the list (the higher the priority) but it may depend on the type of project.",{"type":33,"tag":48,"props":4850,"children":4851},{},[4852],{"type":33,"tag":210,"props":4853,"children":4857},{"alt":4854,"src":4855,"title":4854,"width":4856},"Checklist","/article/web-accessiblity/checklist.svg","120",[],{"type":33,"tag":774,"props":4859,"children":4861},{"id":4860},"checklist",[4862],{"type":39,"value":4854},{"type":33,"tag":132,"props":4864,"children":4865},{},[4866,4876,4881,4886,4891,4896,4901,4906,4911,4916,4921,4926,4931,4936,4941],{"type":33,"tag":136,"props":4867,"children":4868},{},[4869,4871],{"type":39,"value":4870},"⏹️ Highlighted element with active ",{"type":33,"tag":140,"props":4872,"children":4873},{},[4874],{"type":39,"value":4875},":focus",{"type":33,"tag":136,"props":4877,"children":4878},{},[4879],{"type":39,"value":4880},"⏹️ Semantic HTML code structure (headings, navigation, tables, forms, etc.)",{"type":33,"tag":136,"props":4882,"children":4883},{},[4884],{"type":39,"value":4885},"⏹️ Ability to browse and interact with the entire site using the keyboard",{"type":33,"tag":136,"props":4887,"children":4888},{},[4889],{"type":39,"value":4890},"⏹️ Accessibility of forms using the keyboard",{"type":33,"tag":136,"props":4892,"children":4893},{},[4894],{"type":39,"value":4895},"⏹️ Alternative text for all images",{"type":33,"tag":136,"props":4897,"children":4898},{},[4899],{"type":39,"value":4900},"⏹️ Sufficient contrast and text size",{"type":33,"tag":136,"props":4902,"children":4903},{},[4904],{"type":39,"value":4905},"⏹️ Form labels",{"type":33,"tag":136,"props":4907,"children":4908},{},[4909],{"type":39,"value":4910},"⏹️ Basic WAI-ARIA attributes",{"type":33,"tag":136,"props":4912,"children":4913},{},[4914],{"type":39,"value":4915},"⏹️ Responsive design",{"type":33,"tag":136,"props":4917,"children":4918},{},[4919],{"type":39,"value":4920},"⏹️ The site should not break when the base text size is increased (System Settings)",{"type":33,"tag":136,"props":4922,"children":4923},{},[4924],{"type":39,"value":4925},"⏹️ Web is tested using manual testing",{"type":33,"tag":136,"props":4927,"children":4928},{},[4929],{"type":39,"value":4930},"⏹️ Web speed optimization",{"type":33,"tag":136,"props":4932,"children":4933},{},[4934],{"type":39,"value":4935},"⏹️ Clear link labeling",{"type":33,"tag":136,"props":4937,"children":4938},{},[4939],{"type":39,"value":4940},"⏹️ Large enough controls",{"type":33,"tag":136,"props":4942,"children":4943},{},[4944],{"type":39,"value":4945},"⏹️ Accessibility of multimedia content",{"type":33,"tag":41,"props":4947,"children":4949},{"id":4948},"užitečné-odkazy",[4950],{"type":39,"value":4951},"Užitečné odkazy",{"type":33,"tag":132,"props":4953,"children":4954},{},[4955,4965,4973,4982,4991,5000,5008,5018,5026,5035,5044,5052],{"type":33,"tag":136,"props":4956,"children":4957},{},[4958],{"type":33,"tag":101,"props":4959,"children":4962},{"href":4960,"rel":4961,":target":106},"http://blindfriendly.cz",[105],[4963],{"type":39,"value":4964},"Blind Friendly (CZ)",{"type":33,"tag":136,"props":4966,"children":4967},{},[4968],{"type":33,"tag":101,"props":4969,"children":4971},{"href":4628,"rel":4970,":target":106},[105],[4972],{"type":39,"value":4654},{"type":33,"tag":136,"props":4974,"children":4975},{},[4976],{"type":33,"tag":101,"props":4977,"children":4980},{"href":4978,"rel":4979,":target":106},"https://support.apple.com/en-gb/guide/voiceover/vo2682/mac",[105],[4981],{"type":39,"value":4675},{"type":33,"tag":136,"props":4983,"children":4984},{},[4985],{"type":33,"tag":101,"props":4986,"children":4989},{"href":4987,"rel":4988,":target":106},"https://pa11y.org",[105],[4990],{"type":39,"value":4828},{"type":33,"tag":136,"props":4992,"children":4993},{},[4994],{"type":33,"tag":101,"props":4995,"children":4998},{"href":4996,"rel":4997,":target":106},"https://www.w3.org/WAI/standards-guidelines/aria/",[105],[4999],{"type":39,"value":3126},{"type":33,"tag":136,"props":5001,"children":5002},{},[5003],{"type":33,"tag":101,"props":5004,"children":5006},{"href":2885,"rel":5005,":target":106},[105],[5007],{"type":39,"value":2672},{"type":33,"tag":136,"props":5009,"children":5010},{},[5011],{"type":33,"tag":101,"props":5012,"children":5015},{"href":5013,"rel":5014,":target":106},"https://webaim.org/",[105],[5016],{"type":39,"value":5017},"WebAIM",{"type":33,"tag":136,"props":5019,"children":5020},{},[5021],{"type":33,"tag":101,"props":5022,"children":5024},{"href":4292,"rel":5023,":target":106},[105],[5025],{"type":39,"value":4296},{"type":33,"tag":136,"props":5027,"children":5028},{},[5029],{"type":33,"tag":101,"props":5030,"children":5033},{"href":5031,"rel":5032,":target":106},"https://web.dev/vitals/",[105],[5034],{"type":39,"value":4303},{"type":33,"tag":136,"props":5036,"children":5037},{},[5038],{"type":33,"tag":101,"props":5039,"children":5041},{"href":3639,"rel":5040,":target":106},[105],[5042],{"type":39,"value":5043},"WebAIM Contrast Checker",{"type":33,"tag":136,"props":5045,"children":5046},{},[5047],{"type":33,"tag":101,"props":5048,"children":5050},{"href":4416,"rel":5049,":target":106},[105],[5051],{"type":39,"value":4423},{"type":33,"tag":136,"props":5053,"children":5054},{},[5055],{"type":33,"tag":101,"props":5056,"children":5058},{"href":4401,"rel":5057,":target":106},[105],[5059],{"type":39,"value":5060},"Antispam",{"title":8,"searchDepth":919,"depth":919,"links":5062},[5063,5064,5065,5066,5067,5068,5079,5083,5089,5092],{"id":2687,"depth":919,"text":2690},{"id":2752,"depth":919,"text":2755},{"id":2856,"depth":919,"text":2859},{"id":2874,"depth":919,"text":2877},{"id":3123,"depth":919,"text":3126},{"id":3171,"depth":919,"text":3174,"children":5069},[5070,5071,5072,5073,5074,5075,5076,5077,5078],{"id":3182,"depth":931,"text":3185},{"id":3264,"depth":931,"text":3267},{"id":3368,"depth":931,"text":3371},{"id":3413,"depth":931,"text":3416},{"id":3424,"depth":931,"text":3427},{"id":3586,"depth":931,"text":3589},{"id":3809,"depth":931,"text":3812},{"id":4210,"depth":931,"text":4213},{"id":4255,"depth":931,"text":4258},{"id":4312,"depth":919,"text":4315,"children":5080},[5081,5082],{"id":4318,"depth":931,"text":4321},{"id":4462,"depth":931,"text":4465},{"id":4520,"depth":919,"text":4523,"children":5084},[5085,5086,5087,5088],{"id":4588,"depth":931,"text":4591},{"id":4619,"depth":931,"text":4622},{"id":4672,"depth":931,"text":4675},{"id":4795,"depth":931,"text":4798},{"id":4833,"depth":919,"text":4836,"children":5090},[5091],{"id":4860,"depth":931,"text":4854},{"id":4948,"depth":919,"text":4951},"content:knowledge:web-accessibility-guide.md","knowledge/web-accessibility-guide.md",1775463423537]