Cách khắc phục lỗi “Các phần tử có thể nhấp quá gần nhau” (3 phương pháp)

Các vấn đề về khả năng sử dụng trên thiết bị di động chưa được giải quyết có thể có tác động đáng kể đến lưu lượng truy cập trang web của bạn. Một vấn đề phổ biến mà Google Search Console có thể cảnh báo cho bạn là lỗi “Các phần tử có thể nhấp quá gần nhau”, điều này có thể có nghĩa là trang web của bạn rất phức tạp đối với người dùng di động để điều hướng.

Hơn 4,32 tỷ người truy cập Internet từ thiết bị di động của họ. Do đó, điều quan trọng là phải giải quyết lỗi phần tử có thể nhấp này càng sớm càng tốt. Rất may, có nhiều cách bạn có thể làm như vậy và làm cho trang web của bạn thân thiện hơn với thiết bị di động.

Trong bài viết này, chúng tôi sẽ giải thích vấn đề “Các phần tử có thể nhấp quá gần nhau” là gì, thảo luận lý do tại sao nó xảy ra và hướng dẫn bạn ba phương pháp bạn có thể sử dụng để khắc phục vấn đề này. Chúng tôi cũng sẽ giải thích lỗi “Nội dung rộng hơn màn hình” là gì và cách bạn có thể giải quyết lỗi này.

Cùng bắt tay vào làm!

Thích xem phiên bản video?

Lỗi “Các phần tử có thể nhấp quá gần nhau” là gì

Tóm lại, lỗi khả năng sử dụng trên thiết bị di động có thể khiến trang web WordPress của bạn không thể truy cập được và khó khăn hơn cho người dùng di động trong việc điều hướng. Bạn có thể sử dụng báo cáo Khả năng sử dụng trên thiết bị di động của Google Search Console để kiểm tra trang web của mình.

Có sáu loại vấn đề chính về khả năng sử dụng trên thiết bị di động mà bạn có thể gặp phải, đó là:

1. Sử dụng các plugin không tương thích
2. Chế độ xem chưa được đặt
3. Chế độ xem không được đặt thành “device-width”
4. Văn bản quá nhỏ để đọc
5. Nội dung rộng hơn màn hình
6. Các phần tử có thể nhấp quá gần nhau

Là một phần của báo cáo này, Google Search Console sẽ kiểm tra tất cả các yếu tố có thể nhấp của trang web của bạn, chẳng hạn như các nút và liên kết. Mục đích của việc này là để xác minh xem liệu người dùng di động có thể thoải mái tương tác với các thành phần trên trang web của bạn chỉ bằng cách chạm, thay vì sử dụng bàn phím hoặc chuột hay không.

Nếu Google Search Console xác định rằng các phần tử có thể nhấp của bạn gây ra thách thức cho người dùng thiết bị di động, thì điều đó sẽ bao gồm lỗi “Các phần tử có thể nhấp quá gần nhau” trong báo cáo tóm tắt của bạn.

Nếu bạn nhấp vào lỗi, nó sẽ đưa bạn đến trang thông tin chi tiết và trạng thái. Trên màn hình này, bạn có thể tìm hiểu thêm về sự cố, bao gồm cả các trang bị ảnh hưởng.

Về cơ bản, lỗi phần tử có thể nhấp là một cảnh báo cho biết rằng các phần tử có thể nhấp được trên trang web WordPress của bạn quá nhỏ để người dùng di động có thể tương tác thoải mái.

Ngoài ra, nó có thể có nghĩa là chúng đủ lớn, nhưng ở vị trí quá gần với các phần tử lân cận. Nếu các nút, liên kết và các mục có thể nhấp khác tập hợp quá gần nhau, người dùng có nguy cơ chạm nhầm vào những mục đó, điều này làm ảnh hưởng đến Trải nghiệm người dùng (UX).

Mặc dù việc các phần tử có thể nhấp quá gần nhau được phân loại là lỗi khả năng sử dụng trên thiết bị di động, nhưng việc giải quyết vấn đề này cũng có thể cải thiện khả năng truy cập trang web của bạn. Ví dụ: những người có vấn đề về sự khéo léo có thể đánh giá cao một số không gian bổ sung giữa các yếu tố tương tác. Ngược lại, người dùng có các vấn đề liên quan đến thị lực có thể thấy dễ dàng hơn khi tương tác với các nút và liên kết lớn, được xác định rõ ràng.

Tại sao lỗi “Các phần tử có thể nhấp quá gần nhau” có thể xuất hiện

Các yếu tố khác nhau có thể dẫn đến vấn đề “Các yếu tố có thể nhấp quá gần nhau”. Đôi khi, đó chỉ là do Google không thể yêu cầu các tài nguyên cần thiết trong quá trình hiển thị. Nếu đúng như vậy, bạn có thể thử sử dụng bài kiểm tra tính thân thiện với thiết bị di động và xem nó có vượt qua không. Nếu có, bạn có thể bỏ qua nó.

Vấn đề này cũng có thể do thiết kế trang web của bạn. Ví dụ: nếu bạn cố gắng ép quá nhiều yếu tố tương tác vào một trang web, bạn có thể gặp lỗi khả năng sử dụng trên thiết bị di động này.

Một lý do khác dẫn đến lỗi phần tử có thể nhấp là có vấn đề với khả năng đáp ứng trên thiết bị di động của thiết kế trang web của bạn. Trang web của bạn phải linh hoạt và tự động điều chỉnh để phù hợp với thiết bị cụ thể của khách truy cập để cung cấp trải nghiệm người dùng tốt nhất có thể. Tuy nhiên, nếu trang web của bạn không phản hồi, điều đó có thể dẫn đến các vấn đề về khả năng sử dụng.

Cụ thể hơn, nếu trang web của bạn không phản hồi, các phần của trang web có thể bị kéo giãn, co lại hoặc bị cong vênh trên các màn hình cụ thể. Trên các thiết bị có màn hình nhỏ hơn, các phần tử có thể chạm có thể bị chật chội hoặc bị bóp méo.

Việc xác định một số lý do tiêu chuẩn và tiềm ẩn khiến lỗi này xảy ra có thể giúp bạn hiểu rõ hơn tại sao trang web của bạn lại gặp phải các vấn đề về khả năng sử dụng trên thiết bị di động. Nó cũng sẽ giúp bạn xác định cách khắc phục sự cố.

Cách khắc phục lỗi “Các phần tử có thể nhấp quá gần nhau” (3 phương pháp)

Nếu người dùng di động gặp khó khăn trong việc điều hướng trang web của bạn, điều gì khiến họ không điều hướng khỏi trang web? Việc ngăn chặn sự cố này là điều cần thiết để giải quyết tất cả các vấn đề về khả năng sử dụng trên thiết bị di động càng nhanh càng tốt. Hãy xem ba phương pháp bạn có thể sử dụng để sửa lỗi “Các phần tử có thể nhấp quá gần nhau” và cung cấp trải nghiệm người dùng tốt hơn cho người dùng di động của bạn.

1. Sử dụng Plugin WordPress YellowPencil Visual Customizer

YellowPencil Visual Customizer là một plugin WordPress giao diện người dùng cho phép bạn chỉnh sửa CSS và các tệp chủ đề của trang web mà không cần bất kỳ mã hóa nào.

Plugin này rất hữu ích để sửa đổi kích thước mục tiêu có thể chỉnh sửa của bạn, chẳng hạn như làm cho các nút của bạn lớn hơn. Bạn cũng có thể tạo thêm không gian giữa các phần tử có thể nhấp bằng cách thay đổi lề và khoảng cách giữa chúng.

Bạn có thể tải xuống plugin YellowPencil miễn phí hoặc mua giấy phép Thông thường hoặc Mở rộng. Để sử dụng nó, trước tiên hãy cài đặt và kích hoạt nó trên trang web WordPress của bạn bằng cách duyệt đến Plugin > Add New , tìm kiếm plugin, sau đó nhấp vào Install Now > Activate .

Tiếp theo, điều hướng đến YellowPencil > Customizations . Trong tab Tùy chỉnh , hãy chọn Bắt đầu!

Giao diện tùy biến trực quan sẽ tải và nhắc bạn chọn trang gây ra lỗi khả năng sử dụng trên thiết bị di động.

Bạn có thể áp dụng các thay đổi của mình cho trang cụ thể này hoặc trên toàn bộ trang web của mình. Nếu nhiều trang hiển thị lỗi phần tử có thể nhấp, bạn có thể muốn chọn Toàn cầu.

Thực hiện lựa chọn của bạn, sau đó nhấp vào Tiếp tục. Giờ đây, bạn có thể làm việc theo cách của mình thông qua trang web của mình, chọn từng phần tử có thể áp dụng. YellowPencil sẽ hiển thị một bảng các tùy chọn chỉnh sửa cho phần tử đó.

Ví dụ: trong ảnh chụp màn hình bên dưới, chúng tôi đã chọn Padding và thêm 10 pixel ở tất cả các bên để tăng khoảng cách giữa các mục tiêu có thể chỉnh sửa:

Cài đặt Kích thước và Vị trí cũng giúp giải quyết lỗi “Các phần tử có thể nhấp quá gần nhau”. Mặc dù không cần thiết, nhưng nếu bạn muốn chỉnh sửa mã CSS trực tiếp, bạn có thể làm như vậy thông qua bảng điều khiển bên trái.

Sau đó, bạn có thể chuyển sang phần tử tiếp theo gây ra sự cố về khả năng sử dụng trên thiết bị di động và lặp lại quy trình. Khi bạn hài lòng với những thay đổi của mình, hãy nhấp vào nút Lưu màu xanh lục.

2. Đảm bảo rằng tất cả các mục tiêu có thể chỉnh sửa đều ở mức tối thiểu 48px

Không thể tạo ra một thiết kế tĩnh duy nhất trông đẹp và hoạt động chính xác trên tất cả các thiết bị. Thay vào đó, sẽ là tốt nhất nếu bạn muốn tạo một bố cục linh hoạt bằng cách xác định tất cả các mục tiêu có thể chỉnh sửa của mình bằng cách sử dụng pixel không phụ thuộc vào thiết bị (dpi). Các phần tử được xác định bằng dpi có thể tự động chia tỷ lệ theo kích thước dựa trên kích thước màn hình của người dùng.

Trên thiết bị di động, mục tiêu cảm ứng tối thiểu được đề xuất là 48 × 48 pixel. Nó tương đương với khoảng 9 mm, đủ cho ngón tay của người bình thường.

Do đó, nếu bạn đang đấu tranh để tìm ra chính xác yếu tố nào là nguồn gốc của vấn đề, thì việc xem xét dpi của từng yếu tố có thể giúp ích cho bạn. Nếu nó nằm dưới mục tiêu cảm ứng được đề xuất (ví dụ: 24px), bạn có thể tăng phần đệm để đưa nó lên 48px.

Bạn có thể kiểm tra giá trị được tính toán của vùng có thể áp dụng bằng Công cụ dành cho nhà phát triển của Chrome hoặc Công cụ dành cho nhà phát triển của Firefox, tùy thuộc vào trình duyệt bạn thích. Chúng tôi sẽ sử dụng Chrome làm ví dụ.

Để kiểm tra giá trị dpi của một trong các phần tử có thể nhấp trên trang web WordPress của bạn, hãy mở nó trong tab trình duyệt Chrome và điều hướng đến trang hiển thị lỗi “Các phần tử có thể nhấp quá gần nhau”. Nhấp chuột phải vào trang và chọn Kiểm tra .

Nhấp vào Kiểm tra sẽ mở Công cụ dành cho nhà phát triển của Chrome. Ở trên cùng, nhấp vào biểu tượng hiển thị thiết bị di động, biểu tượng này sẽ đưa bạn đến màn hình thanh công cụ Chuyển đổi thiết bị .

Trong bảng xem trước bên trái, bạn sẽ thấy mô phỏng trên thiết bị di động của trang web của mình. Nếu bạn di chuột qua và nhấp vào bất kỳ phần tử nào có thể chạm được, bạn có thể xem giá trị được tính ở bên phải:

Nếu được yêu cầu, bạn có thể điều chỉnh kích thước của một phần tử bằng cách chỉnh sửa trực tiếp CSS và các tệp trang web của bạn hoặc sử dụng một plugin như YellowPencil.

3. Kiểm tra Phương thức nhập

Nếu bạn đang cố gắng khắc phục lỗi “Các phần tử có thể nhấp quá gần nhau”, nó có thể giúp kiểm tra phương thức nhập. Nó đề cập đến phương pháp hoặc thiết bị mà người dùng đang sử dụng để xem và tương tác với trang web của bạn. Cụ thể hơn, bạn có thể xem họ đang sử dụng điện thoại thông minh, máy tính bảng hay các thiết bị khác.

Ví dụ: cảm ứng được coi là một phương thức nhập không chính xác. Như chúng ta vừa thảo luận, việc sử dụng CSS để tăng kích thước mục tiêu cảm ứng của bạn hoặc thêm phần đệm bổ sung có thể làm cho mục tiêu có thể chạm dễ dàng hơn cho những khách truy cập đang sử dụng thiết bị cảm ứng để tương tác với trang web của bạn.

Tuy nhiên, việc xác định thiết bị của người dùng không phải là một khoa học chính xác. Kỹ thuật này sử dụng cái được gọi là “con trỏ” để kiểm tra phương thức nhập chính của người dùng, phương thức này có thể có một trong hai giá trị:

• Thô : Phương thức nhập chính của thiết bị là cảm ứng.
• Tốt : Phương thức nhập là chuột và bàn di chuột.

Lưu ý rằng nếu cảm ứng là phương thức nhập chính của người dùng, điều này cho thấy rằng người đó đang xem trang web của bạn trên điện thoại thông minh hoặc máy tính bảng.

Tuy nhiên, sự hiện diện của màn hình cảm ứng không đảm bảo rằng ai đó đang sử dụng thiết bị di động. Họ có thể đang truy cập trang web của bạn bằng một máy tính xách tay lớn, hỗ trợ màn hình cảm ứng hoặc họ có thể đã kết nối thiết bị Bluetooth với điện thoại thông minh của họ.

Nếu con trỏ trả về một giá trị thô, bạn có thể điều chỉnh kích thước của mục tiêu có thể chỉnh sửa bằng cách sử dụng CSS. Để làm như vậy, bạn có thể đặt phần sau vào tệp CSS của chủ đề WordPress của bạn (hoặc bằng cách sử dụng một plugin như YellowPencil):

.container a { padding: .2em; } @media (pointer: coarse) { .container a { padding: .8em; } }

Sau khi điều chỉnh CSS, bạn có thể yêu cầu Google thu thập lại dữ liệu trang web của bạn để xác định xem điều này đã khắc phục được sự cố hay chưa.

Ngoài ra, bạn có thể yêu cầu Google thu thập lại dữ liệu các URL riêng lẻ bằng Công cụ kiểm tra URL. Sau khi gửi URL của bạn qua công cụ này, hãy chọn Yêu cầu lập chỉ mục . Sau đó, công cụ Kiểm tra sẽ kiểm tra URL để tìm bất kỳ vấn đề lập chỉ mục rõ ràng nào.

Giả sử rằng Google không tìm thấy vấn đề nào, khi đó trang sẽ đủ điều kiện để lập chỉ mục.

Ngoài ra, nếu bạn có một số lượng lớn URL, bạn có thể gửi sơ đồ trang web. Đối với mỗi trang yêu cầu lập chỉ mục lại, hãy cập nhật thẻ <lastmod> với ngày sửa đổi cuối cùng. Sau đó, bạn có thể gửi sơ đồ trang web này bằng cách sử dụng công cụ báo cáo sơ đồ trang web của Google.

Trong hầu hết các trường hợp, sơ đồ trang web của bạn sẽ được duyệt ngay lập tức. Tuy nhiên, Google có thể mất một khoảng thời gian để thu thập dữ liệu tất cả các URL trong sơ đồ trang web của bạn, tùy thuộc vào các yếu tố như kích thước trang web, lưu lượng truy cập và hoạt động. Cũng không có gì đảm bảo rằng Google sẽ thu thập dữ liệu từng URL trong sơ đồ trang web của bạn.

Lỗi “Nội dung rộng hơn màn hình” là gì

Như bạn có thể nhớ lại, Google Search Console có thể cảnh báo bạn về các lỗi khả năng sử dụng trên thiết bị di động khác nhau. Ngoài “Các yếu tố có thể nhấp quá gần nhau”, báo cáo tóm tắt của bạn cũng có thể bao gồm vấn đề “Nội dung rộng hơn màn hình”.

Vấn đề này sẽ xuất hiện ở cùng một vị trí trong Google Search Console của bạn với lỗi “Phần tử có thể nhấp”. Tương tự, nó có nhiều nguyên nhân tiềm ẩn.

Cách khắc phục lỗi “Nội dung rộng hơn màn hình”

Tại sao lỗi “Nội dung rộng hơn màn hình” có thể xuất hiện

Lỗi này xảy ra khi thiết kế trang web của bạn mở rộng theo chiều ngang, buộc người dùng di động phải vuốt sang một bên để xem nội dung “ngoài màn hình”. Để cung cấp trải nghiệm người dùng tốt, bạn nên tránh cuộn ngang nếu có thể.

Bạn có nhiều khả năng gặp phải vấn đề “Nội dung rộng hơn màn hình” nếu bạn sử dụng giá trị tuyệt đối trong khai báo CSS của mình. Vì bố cục không linh hoạt có thể dẫn đến lỗi “Phần tử có thể nhấp”, nên không có gì lạ khi gặp hai lỗi này trong cùng một báo cáo Khả năng sử dụng trên thiết bị di động.

Cách sửa lỗi “Nội dung rộng hơn màn hình” (5 phương pháp)

Nếu báo cáo của bạn có lỗi “Nội dung rộng hơn màn hình”, bạn có thể sử dụng một số phương pháp đơn giản để giải quyết lỗi này. Chúng ta hãy xem xét năm trong số các tùy chọn phổ biến nhất.

1. Tránh sử dụng các biến tuyệt đối trong khai báo CSS

Một trong những cách tốt nhất để sửa lỗi “Nội dung rộng hơn màn hình” là tránh sử dụng các biến tuyệt đối trong khai báo CSS của bạn. Nội dung của bạn không nên yêu cầu một khung nhìn cụ thể để hiển thị và hoạt động chính xác.

Do đó, thay vì sử dụng giá trị tuyệt đối, bạn nên chọn giá trị chiều rộng và vị trí tương đối cho các phần tử CSS của mình. Sử dụng các giá trị tương đối bất cứ khi nào có thể, bạn có thể tạo bố cục linh hoạt theo tỷ lệ để phù hợp với nhiều kích thước màn hình.

2. Gán hình ảnh chiều rộng tối đa

Hình ảnh có kích thước cố định có thể xuất hiện lớn hơn chế độ xem và do đó, gây ra lỗi “Nội dung rộng hơn màn hình”. Để đảm bảo rằng hình ảnh của bạn chia tỷ lệ dựa trên kích thước của màn hình, tốt nhất bạn nên chỉ định tất cả các hình ảnh có chiều rộng tối đa là 100%.

Nó sẽ buộc hình ảnh thu nhỏ để phù hợp với không gian có sẵn. Ngay cả khi bạn sử dụng max-width , bạn vẫn nên sử dụng thuộc tính chiều rộng và chiều cao trong <image> của mình, vì các trình duyệt web hiện đại sử dụng thông tin này để dành không gian cho hình ảnh khi chúng tải. Sử dụng <image> , bạn có thể tránh thay đổi bố cục khi hình ảnh của bạn cuối cùng xuất hiện trên màn hình.

3. Sử dụng thẻ Meta Viewport

Theo mặc định, các trình duyệt trên thiết bị di động hiển thị trang ở chiều rộng màn hình máy tính để bàn, thường là khoảng 980px. Sau đó, trình duyệt sẽ cố gắng tối ưu hóa trang của bạn bằng cách tăng kích thước phông chữ và chia tỷ lệ nội dung của bạn để phù hợp với kích thước màn hình hiện tại.

Thật không may, hành vi mặc định này có thể dẫn đến sự mâu thuẫn. Một số người dùng có thể cần phóng to để đọc và tương tác với nội dung của bạn, đó là lý do tại sao bạn có thể gặp lỗi này.

Thay vì dựa vào hành vi mặc định này, bạn nên cung cấp cho trình duyệt hướng dẫn về cách kiểm soát kích thước và tỷ lệ của trang. Bạn có thể thực hiện việc này bằng cách chèn thẻ meta viewport vào phần đầu của tài liệu.

4. Sử dụng các kỹ thuật bố cục CSS hiện đại

Bạn cũng có thể sửa lỗi “Nội dung rộng hơn màn hình” bằng cách chuyển đổi bố cục trang web của bạn. Để giúp bạn tạo bố cục linh hoạt hơn, bạn có thể muốn xem xét triển khai các kỹ thuật như Flexbox, CSS Grid Layout hoặc Multiple-Column Layout (Multicol).

5. Sử dụng các truy vấn phương tiện CSS khi thích hợp

Truy vấn phương tiện có thể giúp bạn dễ dàng thay đổi kiểu dựa trên thiết bị của người dùng, bao gồm cả màn hình cảm ứng. Do đó, nếu bạn vẫn gặp lỗi “Nội dung rộng hơn màn hình” tại thời điểm này, chúng tôi khuyên bạn nên sử dụng truy vấn phương tiện CSS nếu thích hợp.

Sau khi thực hiện những thay đổi này, sẽ đến lúc kiểm tra xem bạn đã giải quyết thành công lỗi “Nội dung rộng hơn màn hình” hay chưa. Bạn có thể thực hiện việc này bằng cách chạy lại báo cáo Khả năng sử dụng trên thiết bị di động và xác thực bản sửa lỗi bằng cách sử dụng các bước mà chúng tôi thảo luận trong phần tiếp theo.

Cách xác minh và xác thực cách giải quyết lỗi của bạn

Bất kể lỗi nào ở trên bạn đang gặp phải hoặc các phương pháp bạn sử dụng để khắc phục lỗi đó, điều cần thiết là phải xác định xem các thay đổi của bạn có giải quyết được sự cố hay không. Bạn có thể thực hiện việc này bằng cách chạy lại các bài kiểm tra Khả năng sử dụng trên thiết bị di động của Google.

Để làm như vậy, hãy điều hướng trở lại báo cáo Khả năng sử dụng trên thiết bị di động của bạn và tìm lỗi “Các phần tử có thể nhấp quá gần nhau” . Tiếp theo, chọn tùy chọn Xác thực sửa lỗi .

Lưu ý rằng bạn có thể lặp lại các bước tương tự nếu bạn đang cố gắng xác minh và xác thực cách giải quyết lỗi của mình cho “Nội dung rộng hơn màn hình”. Sau đó, Google sẽ thu thập dữ liệu trang web của bạn và bạn sẽ nhận được thông báo cho biết rằng trang web đang trong quá trình xác thực thay đổi.

Nếu bạn đã giải quyết xong lỗi, thì Google Search Console sẽ hiển thị thông báo “Đã đạt” và dấu kiểm màu xanh lục đi kèm. Mặt khác, nếu các bản sửa lỗi bạn đã sử dụng không được xác thực, bạn sẽ phải kiểm tra lại lỗi để triển khai giải pháp thay thế.

Bản tóm tắt

Các lỗi về khả năng sử dụng trên thiết bị di động chưa được giải quyết có thể dẫn đến trải nghiệm người dùng kém và có thể khiến lưu lượng truy cập trang web của bạn giảm đáng kể. Bằng cách thực hiện các bước để giải quyết các lỗi về khả năng sử dụng , bạn có thể đảm bảo rằng trang web của mình thân thiện với thiết bị di động và có thể truy cập được với nhiều người hơn.

Trong bài đăng này, bạn đã học cách sửa lỗi “Các phần tử có thể nhấp quá gần nhau” bằng ba phương pháp:

1. Sửa đổi trang web của bạn bằng cách sử dụng plugin trình chỉnh sửa kiểu CSS frontend (như YellowPencil).
2. Sử dụng Công cụ dành cho nhà phát triển của Chrome để đảm bảo rằng tất cả các mục tiêu có thể chỉnh sửa là 48 dpi hoặc lớn hơn.
3. Kiểm tra phương thức nhập và điều chỉnh CSS của bạn cho phù hợp.

Bạn có bất kỳ câu hỏi nào về việc sửa lỗi “Các phần tử có thể nhấp quá gần nhau” không? Cho chúng tôi biết trong các ý kiến dưới đây!